flex布局

一：布局原理

1.flex是flexible Box的缩写 ，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
2.采用flex布局的元素，成为flex容器，简称“容器”，它的所有子元素自动成为容器成员，称为flex项目，简称“项目”
注意：
当我们为父盒子设置flex布局以后，子元素的float ,clear和vertical-align属性将失效

---

二：常见父项属性

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）
注意：
主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，其余一个便是侧轴，子元素是跟着主轴排列的

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

justify-content

justify-content属性定义了项目在主轴上的对齐方式
注意：
使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值 从头部开始
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间

flex-wrap

flex-wrap设置子元素是否换行
默认情况下 ，项目都排在一条线上，flex-wrap属性定义，flex布局中默认是不换行的

属性值	说明
nowrap	默认值，不换行
wrap	换行

align-content

align-content设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况，在单行下是没有效果的

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

align-items

align-items设置侧轴上子元素排列方式（单行）
该属性是控制子项在侧轴上的排列方式 在子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中
stretch	拉伸

---

三：flex布局子项常见属性

flex

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

语法：

.box {
	flex: <number>;
}

align-self

align-self属性允许单个项目有与其他项目不一样的方式，可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等于stretch

order

数值越小，排列越靠前，默认值为0