Flex 布局学习
1. flex-direction 主轴方向
2. flex-wrap 主轴一行满了换行
3. flex-flow 1和2的组合
4. justify-content 主轴元素对齐方式
5. align-items 交叉轴元素对齐方式(单行)
6. align-content 交叉轴行对齐方式(多行)
Flex 原理： 意为“弹性布局”，通过给父盒子添加Flex属性，来控制子盒子的位置和排序
注意:是给父类添加 dispaly: flex, 来控制其内的子控件的位子和顺序
主轴和侧轴： 默认情况下X轴位主轴，Y轴位侧轴， 在布局是主轴是可以设置的，另外一个则是侧轴;
主轴布局:
- flex-direction: column; 用来指定主轴的方向
- justify-content: flex-start; 用来设置主轴方向上的排列布局(只是主轴,不会改变方向)
侧轴布局:
- 单行 align-items: flex-start; 用来设置侧轴方向上的排序, 与 justify-content 相对应
- 多行 align-content: 会将多行合并到一块,形成一个整体,并进行 [整体] 的排列
侧轴某个单独布局:
- align-self: 控制某一个子项自己在侧轴的排列方式, 需要配合 nth-child 一起使用.
注意: 使用align-self的属性时, 会使元素的宽高变成自适应,不会拉伸
换行布局: flex-wrap: wrap;
- Nowarp 默认不换行(子控件自适应修改控件的宽度,在一行上显示)
- warp 换行(第二行排列开始位子是将剩余空间平分)
对剩余空间进行分配: flex: 1;
-
flex: 属性定义子项目 分配剩余空间, 用 flex 来表示 多少份数
flex-direction 设置主轴方向：
Row 默认从左到右为主轴方向，即X轴
row-reverse 从右到左
Colunm 从上到下
Colunm-reverse 从下到上
justify-Content 设置主轴上的子元素排列方式：
Flex-start 默认值从头部开始，如果是主轴是X轴，则从左到右
Flex-end 从尾部开始排列
Center 在主轴居中对齐（如果是主轴是X轴，则水平居中）
Space-around 平均分配剩余空间（注意是剩余空间）
Space-between 先两边贴边，在平分剩余空间（重要）
Flex-wrap 设置子元素是否换行：
Nowarp 默认值，不换行
warp 换行
Align-itmes 设置侧轴上的子元素排列方式（单行）:
注意: 用来设置侧轴方向上的排序, 与 justify-content 相对应
flex-start 默认值，从上到下
flex-eng 从下到上
Center 挤在一起居中（垂直居中） ”垂直居中其实就是先在水平主轴X上居中，然后再侧轴Y上居中，两者结合就成了垂直居中“
Stretch 拉伸
Align-content 设置侧轴上的子元素的排列方式（多行）
注意: 会将多行合并到一块,形成一个整体,并进行 [整体] 的排列
Flex-start 默认在侧轴的头部开始排列
Flex-end 在侧轴的尾部开始排列
Center 在侧轴中间显示
Space-around 子项在侧轴平分剩余空间
Spce-between 子项在侧轴先分布在两头，在平分剩余空间
Strech 设置子项元素高度平分父元素的高度
flex-flow 是 flex-direction 和 flex-wrap 属性的复合
例如： flex-flow: column wrap 设置主轴方向和是否换行的简写
Flex布局子项常见的属性：（主轴的）:
-
Flex子项目占的份数（分配剩余空间，用flex表示占多少份数），默认为0;
示例： 经典的导航栏搜索控件自适应，左边一份固定，右边一份固定，中间的自适应 flex： 1 ； nth-child（2）; flex: 1 -
align-self 控制子项自己在【侧轴】的排列方式（默认为auto）允许单个项目有与其他项目不一样的对齐方式，可覆盖aligin-items属性
示例： 只让3号盒子下来。
需要说明的 align-items 与 align-self 的关系, 容器内的所有元素都一致受制于align-items的值, 而align-self只用来控制该容器中的某一个元素
align-self 使用时,会使该元素的宽高变成自适应,不在延伸 -
order定义子项的排列顺序（前后顺序） 数字越小越靠前，默认为0。
示例： （1，2，3 改为 2，1，3 ）
网友评论