flex布局原理
1.flex是flexible Box的缩写.意为弹性布局 ,用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局
2.当我们为父盒子设为flex布局以后,子元素的float , clear和vertical-align属性将失效
因为flex布局可以让子元素一行内显示,不需要浮动,所以就不需要清除浮动
flex布局还可以设置盒子垂直居中,之前只能设置水平居中
3.flex布局又叫伸缩布局,弹性布局,伸缩盒布局,弹性盒布局
4.采用flex布局的元素,称为flex容器 (flex container) 简称 容器
5.它的所有子元素自动称为容器成员,称为flex项目 (flex item) 简称项目
总结: 就是通过给父盒子添加display:flex属性.来控制盒子的位置和排列方式
父项常见属性
flex-direction : 设置主轴的方向 (direction: 方向)
justify-content :设置主轴上的子元素排列方式,
flex-wrap :设置子元素是否换行
align-content : 设置侧轴上的子元素的排列方式 (多行)
align-items : 设置侧轴 上的子元素排列方式 (单行)
flex-flow : 复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex-direction 设置主轴的方向
在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下
注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
flex-direction可以设置的值：
row 默认值:从左到右
row-reverse 从右到左 (倒着排列,子盒子顺序会变.)
column 从上到下
column-reverse 从下到上 (倒着排列,子盒子顺序会变.)
justify-content 设置主轴上的子元素排列方式
介绍 :
1.justify-content 属性定义了项目在主轴上的对齐方式（项目就是子元素）
2.注意： 使用这个属性之前一定要确定好主轴是哪个
属性值 说明
flex-start (start:开始) 默认值,从头部开始,如果主轴是X轴,则从左到右
flex-end (end:结束) 从尾部开始排列,如果主轴是X轴,则贴着右边对齐. 主轴是Y轴,则贴着底部对齐.
center (center:中间) 在主轴居中对齐(如果主轴是X轴则水平居中)
space-around (空间-周围: 周围空间一致 平分) 平均分配剩余空间(不贴边)
space-between (空间-中间) 再平均分配剩余空间 (重要) (先两边贴边)
flex-wrap 设置是否换行
默认情况下，项目都排在一条线（又称”轴线”）上。
flex-wrap属性定义，flex布局中默认是不换行的。
nowrap : 不换行
wrap : 换行
align-items 设置侧轴上的子元素排列方式 (单行)
1.该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项(单行)的时候使用
2.该属性在控制盒子水平居中和垂直居中时使用
flex-start 从头部开始 (默认侧轴为Y时,顶部对齐 从左往右)
flex-end 从尾部开始 (默认侧轴为Y时,底部对齐 从左往右)
center 居中显示
stretch 拉伸 ( 默认值) (默认侧轴为Y时,子盒没有高度时,将和父级一样高)
效果 :
默认x主轴时 -水平垂直居中：
justify-content: center;
align-items: center;
y主轴时 - 水平垂直居中：
flex-direction: column;
justify-content: center;
align-items: center;
align-content 设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行) 在单行下是没有效果的
属性值 说明
flex-start 默认值:在侧轴的头部开始排列 第二行紧贴第一行
flex-end 在侧轴的尾部开始排列 (同上)
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素高度平分父元素高度
注意 :
我们需要多添加几个元素,然后换行: flex-wrap:wrap
因为有了换行,此时我们侧轴上控制子元素的对齐方式我们用align-content
align-content 和align-items区别
1.align-items适用于单行情况下,只有上对齐,下对齐,居中和拉伸
2.align-content 适应与换行(多行)的情况下 (单行情况下无效) , 可以设置上对齐,下对齐,居中,拉伸以及
平均分配剩余空间等属性值
3.总结: 单行找align-items 多行找align-content
flex-flow属性是flex-direction和flex-wrap属性的复合属性
语法 :flex-flow : row wrap ;
flex布局子项常见属性 :
1.flex子项目占的分数
2.align-self控制子项自己再侧轴的排列方式
3.order属性定义子项的排列顺序(前后顺序)
flex属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
align-self 控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
默认值为auto , 表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
语法:
span : nth-child (2) { align-self : flex-end; }
总结: align-items 是控制所有的子项,而align-self是控制单个子项
order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0
注意 : 和 z-index不一样
语法 : .item { order:
