|
一． Flex 1. flex-direction设置主轴方向： 属性值： /* 从左到右，依次排排列，默认值 */ flex-direction: row; /* 沿着x轴从右边排列 */ flex-direction: row-reverse; /* 沿着y轴当作主轴 从上到下*/ flex-direction: column; /* 沿着y轴当作主轴 从下到上*/ flex-direction: column-reverse; 2. justify-content：设置主轴上子元素的排列方式 属性值 justify-content: flex-start; /* 跟flex-direction:是由区别的 从尾部开始 */ justify-content: flex-end; /* 让子元素的沿着主轴居中 */ justify-content: center; /* 所有子元素平分主轴的空白部分 */ justify-content: space-around; /* 先让边缘的俩个元素靠边 剩下平分剩余的空白空间 */ justify-content: space-between; 3. flex-wrap 设置子元素是否换行 属性值 /* 默认 不换行 */ /* flex-wrap: nowrap; */ /* 换行 */ flex-wrap: wrap; 4. align-items：设置侧轴子元素的排列方式（单行） 属性值 /* 从头部开始排列 主轴上的元素排列顺序啥的都不变*/ align-items: flex-start; /* 从底部开始排列 上的元素排列顺序啥的都不变*/ align-items: flex-end; /* 沿着侧轴居中 主轴上的元素排列顺序啥的都不变*/ align-items: center; /* 将子项拉伸到父级的高度，前提是子项没有高度 */ align-items: stretch; 5. align-content：设置侧轴元素上的子元素的排列方式（多行） 属性值： /* 在侧轴顶部开始排列 */ align-content: flex-start; /* 在侧轴di部开始排列 */ align-content: flex-end; /* 让所有的子项沿着侧轴居中排列 */ align-content: center; /* 让子项平分侧轴的空白空间 */ align-content: space-around; /* 让子项的两侧先靠边 然后剩余的平分剩余空间 */ align-content: space-between; /* 设置子项元素在侧轴拉伸到父元素的高度 */ align-content: stretch; 6. flex-flow是flex-direction 和flex-wrap的复合属性 二． Flex常见的属性 1. flex子项占的份数： 属性值 * { margin: 0; padding: 0; } div { display: flex; margin: 100px auto; width: 500px; height: 100px; border: 3px solid red; } span { flex: 1; background-color: aqua; } div p { width: 300px; background-color: bisque; } 如果父元素中有一个子项有自己的宽高，呢么就是在该子元素平分剩下的空间 2. align-self 控制子项自己在侧轴的排列方式 3. order属性来定义子项的排列顺序（前后顺序）：数值越小，排列越靠前 三．
| 
