Flex布局

常见父项的属性：

●flex-direction :设置主轴的方向

Row 默认值从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

●justify-content :设置主轴上的子元素排列方式

flex-start 默认值从头部开始 如果主轴是x轴，则从左到右

flex-end 从尾部开始排列(但元素的顺序还是从左到右)

center 在主轴居中对齐(如果主轴是x轴则水平居中)

space- around 平分剩余空间

space – between 先两边贴边再平分剩余空间(重要)

●flex-wrap :设置子元素是否换行

默认情况下,项目都排在一条线(又称”轴线”) 上。flex-wrap属性定义 , flex布局中默认是不换行的。

nowrap 默认值，不换行

wrap 换行

●align-content :设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴.上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的。

flex-start 默认值在侧轴的头部开始排列

flex- end 在侧轴的尾部开始排列

center 在侧轴中间显示

space-around 子项在侧轴平分剩余空间

space- between 子项在侧轴先分布在两头,再平分剩余空间

stretch 设置子项元素高度平分父元素高度

●align-items :设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项(单行)的时候使用

flex-start 从上到下

flex- end 从下到上

center 挤在一起居中(垂直居中)

stretch 拉伸(默认值但是子盒子如果给高度就不会生效)

●flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap

flex-dicection: column;

flex-wrap: wrap;

它俩的简写可以写成：

flex-flow: column wrap;

常见子项的属性：

●flex子项目占的份数

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

●align-self控制子项自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不-样的对齐方式，可覆盖align-items属性。

默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

span:nth-child(2){

/*设置自己在侧轴的排列方式*/

align-self:flex-end;

}

●order属性定义子项的排列顺序(前后顺序)

数值越小,排列越靠前,默认为0。(这个是左右的形式)

注意:和z-index不-样。(index是叠罗汉的形式)

flex属性flex:1到底是什么？

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

推荐使用此简写属性，而不是单独写这三个属性。

flex-grow：定义项目的的放大比例；

默认为0，即使存在剩余空间，也不会放大；

所有项目的flex-grow为1：等分剩余空间(自动放大占位)；

flex-grow为n的项目，占据的空间(放大的比例)是flex-grow为1的n倍。

flex-shrink：定义项目的缩小比例；

默认为1，即 如果空间不足，该项目将缩小；

所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；

flex-shrink为0：空间不足时，该项目不会缩小；

flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据此属性计算主轴是否有多余空间，

默认值为auto，即 项目原本大小；

设置后项目将占据固定空间。

所以flex属性的默认值为：0 1 auto (不放大会缩小)

flex为none：0 0 auto (不放大也不缩小)

flex为auto：1 1 auto (放大且缩小)

flex为一个非负数字n：该数字为flex-grow的值，

flex：n ；= flex-grow：n； flex-shrink：1； flex-basis：0%;

flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值，

flex：n1 n2；= flex-grow：n1； flex-shrink：n2； flex-basis：0%;

flex为一个长度或百分比L：视为flex-basis的值，

flex：L；= flex-grow：1； flex-shrink：1； flex-basis：L;

flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，

flex：n L；= flex-grow：n； flex-shrink：1； flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。

flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。