学习flex布局前请一定按照阮一峰老师的教程手工敲一遍，100%理解，光看是一知半解。
【一】.基础知识
flex布局,只要把元素设置为display:flex,此元素即可称为flex容器,元素的所有子元素都自动成为容器的成员,简称flex-item
flex容器本身有两根轴,水平的主轴,垂直的交叉轴。因此延伸出4个位置,main start , main end , cross start , cross end
flex容器成员,单个成员占据的主轴空间叫main size,单个成员占据的交叉轴空间叫cross size
【二】.容器的属性
(2.1).flex-direction(设置主轴的方向,设置了方向会影响容器中成员的排列方向)
(2.1.1).flex-direction:row,默认值,主轴的方向为水平方向,容器的成员从左到右排列
<style>
.caochang{
display: flex;
}
</style>
<div class="caochang">
<div class="xuesheng">学生A</div>
<div class="xuesheng">学生B</div>
<div class="xuesheng">学生C</div>
</div>显示ABC,A从页面最左边开始显示
(2.1.2).flex-direction:row-reverse,主轴的方向为水平方向,容器的成员从右到左排列
<style>
.caochang{
display: flex;
}
</style>显示CBA,A从页面最右边开始显示
(2.1.3).flex-direction:column,主轴的方向为垂直方向,容器成员从上到下排列
显示:
学生A 学生B 学生C
(2.1.4).flex-direction:column-reverse,主轴的方向为垂直方向,容器成员从下到上排列
显示:
学生C 学生B 学生A
flex-direction的所有值总结下就是改变了容器成员的显示方向和顺序
(2.2).flex-wrap属性(容器成员一般都是排在一条线上,这个属性主要来设置如果一行排列不下,如何来换行)
(2.2.1).flex-wrap:nowrap,默认值,不换行
超出会显示横向滚动条，很奇怪的是我这里超出页面宽度，文字是纵向显示的，类似：
学学 生生 A B
(2.2.2).flex-wrap:wrap,正常换行显示
(2.2.3).flex-wrap:wrap-reverse,换行显示,只不过显示顺序不一样,假如每个容器元素宽度100%,元素分别为ABC,那么它显示CBA
(2.3).flex-flow属性是flex-direction和flex-wrap的混合写法,默认值 row nowrap,可以同时设置容器内元素的排列方向和换行方式
例子flex-flow:row-reverse wrap;
(2.4).justify-content属性设置容器内元素在主轴上的对齐方式(默认值flex-start)
(2.4.1).flex-start 容器元素以主轴的开头对齐,假设主轴方向为从左到右,相当于左对齐
(2.4.2).flex-end 容器元素以主轴的结尾对齐,假设主轴方向为从左到右,相当于右对齐
(2.4.3).center 居中对齐(容器的所有元素显示在容器中部)
(2.4.4).space-between 两端对齐,容器内元素之间间隔相等,是元素之间的间隔相等
(2.4.4).space-around 每个容器内元素两侧的间隔都相等
(2.5).align-item属性设置项目在交叉轴的对齐方式
(2.5.1).flex-start 交叉轴的起点对齐
(2.5.2).flex-end 交叉轴的终点对齐
(2.5.3).center 交叉轴的中点对齐,相当于垂直居中了,所以容器的元素都在中间
(2.5.4).baseline 以容器元素的第一行文字的基线对齐
(2.5.5).stretch 默认值,如果容器的元素没有设置高度或者auto,将占满整个容器的高度
(2.6).align-content属性定义多根轴线的对齐方式。如果只有1根轴线则不起作用。
(2.6.1).flex-start 交叉轴的起点对齐
(2.6.2).flex-end 交叉轴的终点对齐
(2.6.3).center 交叉轴的中点对齐
(2.6.4).space-between 交叉轴两端对齐
(2.6.5).space-around 每根轴线两侧的间隔都相等
(2.6.6).stretch 轴线占满整个交叉轴。
【三】.项目的属性
(3.1).order属性定义项目的排列顺序,值越小,排列越靠前,举个栗子:
<div style="order: 3">A</div> <div style="order: 2">B</div> <div style="order: 1">C</div>
代码虽然是ABC,页面显示的顺序是CBA
(3.2).flex-grow属性定义项目的放大比例,默认值为0,将容器的元素或者项目在原来基础放大N倍
假如所有容器元素项目的flex-grow的值大于0且都相等,则元素项目等分整个容器的空间
例如
<div style="flex-grow: 1;background: red;">A</div> <div style="flex-grow: 1;background: green;">B</div> <div style="flex-grow: 1;background: black;">C</div>
假如容器的元素分别设置为1,2,3的比例,则第2个元素是第1个元素的2倍,第3个元素是第1个元素的3倍
例如
<div style="flex-grow: 1;background: red;">A</div> <div style="flex-grow: 2;background: green;">B</div> <div style="flex-grow: 3;background: black;">C</div>
(3.3).flex-shrink属性设置容器内元素的缩小比例,默认值是1,也就是当容器空间不足,项目会缩小
假如都设置为1,当容器空间不足,全部容器的元素项都等比例缩小
假如某个元素项设置为0,则意思当整个容器空间不足时它不缩小。
(3.4).flex-basis设置项目占据整个容器的主轴空间大小，默认值为auto，支持长度单位和百分比
类似于自己设置width
(3.5).flex属性是flex-grow、flex-shrink、flex-basis的简写,默认值0 1 auto
(3.6).align-self属性允许单个项目有与其他项目不同的对齐方式,可以覆盖align-items属性,默认值auto
