flex详解

基本概念

1. 传统布局与flex布局

传统布局：基于盒状模型， display 属性 + position属性 + float属性。（特殊布局不易实现，如垂直居中）
Flex 布局：简便完整实现各种页面布局，所有浏览器的支持

2.flex容器（父）与项目（子）

采用 Flex 布局的元素——Flex 容器（flex container），简称”容器”
它的所有子元素自动成为容器成员——称为 Flex 项目（flex item），简称”项目”

  3. 容器默认存在两根轴：

水平的主轴（main axis）主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
垂直的交叉轴（cross axis）交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

flex布局

.container{  display: flex;        //容器指定flex布局  display: inline-flex; //行内元素指定flex布局  display: -webkit-flex;}

注：Webkit 内核的浏览器，必须加上-webkit前缀
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

容器的属性

flex-direction: rowflex-wrap: nowrapflex-flowjustify-content:row nowrapalign-items:flex-start align-content:  

//主轴方向flex-direction: row            //主轴左到右                  row-reverse    //主轴右到左                column         //主轴上到下                column-reverse //主轴下到上//是否换行flex-wrap:nowrap               //每个项目在主轴均匀压缩，不换行，第一行再上面          wrap                 //换行，第一行在上面          wrap-reverse;        //换行，第一行在下面//主轴方向和是否折叠flex-flow:<flex-direction> || <flex-wrap>;//项目在主轴对齐方式justify-content: flex-start    //左对齐                 flex-end      //右对齐                 center        //居中对齐                 space-between //两边对齐，项目中间相隔相同距离                 space-around  //两边对齐，两边距离是中间距离一半//项目在交叉轴对齐方式align-items:flex-start   //上对齐                  flex-end     //下对齐            center       //居中对齐            baseline     //以第一行文字的基线对齐            stretch      //若项目未设置高度或设为auto，将占满整个容器的高度//多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用align-content:flex-start   //              flex-end     //              center       //              space-between//                space-around //               stretch      //

项目属性

order:0flex-grow:0flex-shrink:1flex-basis:项目本身大小flex：0 1 auto align-self:继承父元素的align-items，若没有父元素，则等同于stretch

//项目的序号，越小越在前order:数字//项目放大比例，为0不放大，为1的各项目等分剩余空间，为2的项目分的剩余空间是为1的项目的两倍flex-grow:0（默认） | 1 | 2//项目压缩比例，为1的各项目均等压缩，为0的不压缩flex-shrink:0 | 1（默认）//项目占据的主轴空间（main size），浏览器据此算主轴剩余空间，默认项目本身大小flex-basis:auto（默认） | <length>//放大、压缩、占主轴空间flex:<flex-grow> | <flex-shrink> | <flex-basis>//快捷值：auto (1 1 auto) 和 none (0 0 auto)//设置自己的对齐方式，可覆盖align-items。auto继承父元素的，若没父元素等同于stretchalign-self:auto           flex-start             flex-end             center             baseline            stretch;

布局

网格布局：项目固定长宽，平均分配剩余的空间
圣杯布局： header、content、footer为主轴从上到下的每个项目，content为一个容器，left，center，right为每个项目，项目自动填充