idiot_MAN

flex布局超级详细教程

文章目录

flex布局超级详细教程
- flex 布局父项常见属性
- - ①、flex-direction：设置主轴的方向
  - ②、 justify-content：主轴上的子元素排列方式
  - ③、flex-wrap：子元素是否换行
  - ④、align-content：侧轴上的子元素的排列方式 (**多行**)
  - ⑤、align-items：侧轴上的子元素的排列方式 **(单行**)
  - ⑥、flex-flow
- flex布局子项常见属性
- - ①、flex 属性
  - ②、align-self 控制子项自己在侧轴的排列方式
  - ③、order 属性定义子项的排列顺序
  - ④、flex-group子项目延伸比率## 标题
- 总结：

flex 布局父项常见属性

以下由6个属性是对父元素设置的

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式 (多行)
align-items：设置侧轴上的子元素的排列方式 (单行)
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

align-content 和 align-items

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content 使用于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找 align-itens 多行找 align-content

①、flex-direction：设置主轴的方向

主轴与侧轴

在flex布局在，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴
默认主轴方向就是x轴得方向，水平向右
默认侧轴方向就是y轴得方向，垂直向下
flex-direction 属性决定主轴的方向（即项目的排列方向

注意：主轴和侧轴是会变化的，就看 flex-direction 设置为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

属性值	解释说明
row	默认值从左到右
row-reverse	从右向左
column	从上到下
column-reverse	从下到上