菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育
标题: 张建斌-2022-11-24 [打印本页]
作者: IT5353 时间: 2022-11-25 00:54
标题: 张建斌-2022-11-24
一． 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属性来定义子项的排列顺序（前后顺序）：数值越小，排列越靠前
三．
| 欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) |
Powered by Discuz! X3.4 |