CSS Flex布局

1、开启flex布局 

display: flex;

2、允许自动换行 

flex-wrap: wrap;

3、设置主轴对齐方式 

justify-content: space-between;

4、传统布局和flex布局对比

4.1 传统布局:

4.1.1 兼容性好

4.1.2 布局繁琐

4.1.3局限性，不能在移动端很好的布局

4.2 flex布局:

4.2.1 操作方便，布局极其简单，移动端使用比较广泛

4.2.2 pc端浏览器支持情况比较差

4.2.3 IE11或更低版本不支持flex或仅支持部分

5、布局建议

5.1 如果是pc端页面布局，还是采用传统方式 display+float+position

5.2 如果是移动端或者是不考虑兼容的pc则采用flex

5.3 给ul设置display:flex,那么ul就是flex容器, ul里面的"子元素"就是flex项目

5.4 因为flex容器有flex容器的属性,flex项目有flex项目的属性

6、容器属性

6.1 以下6个属性是对容器(也就是父元素)设置的

6.1.1 flex-direction：设置主轴的方向

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

6.1.3 flex-wrap：设置子元素是否换行  

6.1.4 align-content：设置侧轴上的子元素的排列方式（多行）

6.1.5 align-items：设置侧轴上的子元素排列方式（单行）

6.1.6 flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

6.2 flex布局子项(项目)属性

6.2.1 flex-grow属性定义项目的放大比例

6.2.2 flex-shrink属性定义了项目的缩小比例

6.2.3 flex-basis属性定义了剩余空间分配之前元素的默认大小

6.2.4 flex子项目占的份数:

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

6.2.4.2 order属性定义子项的排列顺序（前后顺序）

6.3 注意:

开启flex以后,会出现两个轴,一个是主轴,一个是侧轴, 我们的flex项目会沿着主轴方向排列  主轴默认方向是从左到右, 侧轴默认方向是从上到下  主轴跟侧轴始终是垂直关系

7、flex布局原理

7.1 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

7.2 注意:

当我们为父盒子设为 flex 布局以后，子元素的 "float、clear 和 vertical-align" 属性将失效。

7.3 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

7.4 采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。

8、例子

8.1 开启弹性盒子以后, 项目会沿着主轴方向排列

8.1.1 /* 默认主轴方向是从左到右

/* 通过容器属性flex-direction改变主轴方向

8.1.2 /* row取值就是默认取值,主轴方向从左到右

flex-direction: row;

8.1.3 /* row-reverse主轴方向从右到左

flex-direction: row-reverse;

8.1.4 /* column主轴方向从上到下

flex-direction: column;

8.1.5 /* column-reverse主轴方向从下到上

flex-direction: column-reverse;

8.2 /* justify-content设置项目在主轴方向上排列方式:

/* 取值:

8.2.1 /* center项目排列在主轴中间

justify-content: center;

8.2.2 /* flex-start项目排列在主轴的开始位置

justify-content: flex-start;

8.2.3 /* flex-end项目排列在主轴的结束位置

justify-content: flex-end;

8.2.4 /* space-between两端对齐

justify-content: space-between;

8.2.5 /* space-around项目左右间隔相同

justify-content: space-around;

8.2.6 /* space-evenly平分空白距离

justify-content: space-evenly;

8.3 /* 默认情况下,如果flex项目的总宽度超过flex容器,flex容器会强制这些flex项目一行显示,所以会对flex项目进行压缩

8.3.1 /* 通过flex-wrap属性可以设置flex项目是否允许换行

/* 取值: nowrap不换行(默认取值) wrap换行

/* flex-wrap: nowrap;

/*flex-wrap: wrap;

8.4 /* align-items属性是设置单行项目,在侧轴方向的对齐方式

/* 取值:

8.4.1/* stretch拉伸,默认取值

/* align-items: stretch;

8.4.2 /* center侧轴的中部

/*align-items: center;

8.4.3 /* flex-start侧轴的开始

/* align-items: flex-start;

8.4.4 /* flext-end侧轴的结束

/* align-items: flex-end;

8.5 区分

8.5.1 /* align-items设置"单行项目"在侧轴方向的对齐方式

8.5.2 /* align-content设置"多行项目"在侧轴方向的对齐方式

8.5.3 /* align-self设置"当前某个"项目在侧轴的对齐方式

8.6 /* order属性定义项目的排列顺序

8.6.1 /* order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局 */

8.6.2 /* 取值数值,不带px单位; 数值越小，排列越靠前，默认为0。

8.7 多行对齐(多行内容在交叉轴上的对齐方式)

8.7.1 /* 注意: 需要设置flex-wrap:wrap才可能出现多行项目(取值同单行对齐)

/* align-content: flex-end;

/* align-content: flex-start;

/* align-content: center;

/* align-content: space-between;

/* align-content: space-around;

/* align-content: space-evenly;

/* align-content: stretch;

8.8 /* flex-flow可以同时设置flex-direction以及flex-wrap属性, 没有顺序要求, 被省略的属性值将使用默认值

8.8.1 /* flex-flow: row-reverse wrap;

8.8.2 /* flex-grow定义项目的扩大比例, 当flex容器有剩余宽度的时候,定义剩余的宽度如何分配

8.8.3 /* flex-grow取值是数值,不带CSS单位, 默认为0; 0表示不扩大

8.9 /* flex-shrink, 当flex容器宽度不够的时候,项目的缩小比例

8.9.1 /* flex-shrink取值是数值,不带css单位, 默认1;

8.9.2 /* flex-basis属性定义了剩余空间分配之前元素的默认大小，它可以是长度（例如20%, 40px, 5em等）或关键字auto。它的默认值为auto，即"项目的本来大小"

8.9.3 /* 百分比是相对flex容器的

8.10 /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写属性，默认值为0 1 auto。

8.10.1 语法:

/* flex: flex-grow flex-shrink flex-basis;

8.10.1 /* flex: 放大比例 缩小比例 项目默认大小

8.10.2 /* 该属性有两个快捷值：

/* 1. flex: auto(等同于flex: 1 1 auto)

/* 2. flex: none(等用于flex: 0 0 auto)

8.10.3 /* 另外,可以使用一个，两个或三个值来指定 flex属性, 规则如下:

8.10.3.1 /* 单值语法:

值必须为以下其中之一：

一个无单位数 (): 它会被当作 flex: 1 0; 的值被假定为 1，然后 的值被假定为0。

一个有效的 宽度 (width) 值：它会被当作 的值。

关键字none，auto或initial.

8.10.3.2 /* 双值语法:

第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：

一个无单位数：它会被当作 的值。

一个有效的宽度值：它会被当作 的值。

8.10.3.3 /* 三值语法：

第一个值必须为一个无单位数，并且它会被当作 的值。

第二个值必须为一个无单位数，并且它会被当作 的值。

第三个值必须为一个有效的宽度值，并且它会被当作的值。

8.10.4 /* flex: 3;

/* 等同于

flex-grow: 3;

flex-shrink: 1;

flex-basis: 0%;

8.10.5 /*flex: 2;

/* 等同于

flex-grow: 2;

flex-shrink: 1;

flex-basis: 0%;

8.10.6 /*flex: 1;

/* 等同于

flex-grow: 1;

flex-shrink: 1;

flex-basis: 0%;

8.10.7 /*flex: 0 1 auto;

/* 等同于

flex-grow: 0;

flex-shrink: 1;

flex-basis: auto;