2.6-flex布局（重点）

左右布局

(1)浮动 float:left/right;

(2)行内块元素 display:inline-block;

(3)flex布局:display:flex;

扩展：块（block），用于网页中的部分节

行内（inline），用于文本

表，用于二维数数据

定位，用于元素的明确位置

Flex布局 --弹性容器：当内容过多会自适应调整宽度，元素等比例缩放

flex容器属性

1、display:flex、inline-flex;(flex是块级元素，inline-flex是行内元素)

在弹性容器中默认有两条轴：

    主轴：默认情况是水平从左到右的一条轴

    侧轴：垂直主轴的一条，默认就是垂直从上到下的一条

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2、flex-direction--改变容器主轴的方向（会被压缩）

    row ：设置主轴水平从左到右，默认

    row-reverse：设置主轴水平从右往左

    column：设置主轴垂直从上往下

    column-reverse：设置主轴垂直从下往上

3、flex-wrap--定义子元素是否换行（当子项目的总宽度大于父元素的宽度的时候，所以子项目都会被等比例压缩至放得下所有子项目，flex-wrap解决了放不下换行问题）

     nowrap ：不换行，默认

     wrap：换行

     wrap-reverse：反向换行

 当父盒子的高度远远大于子项目的高度，换行，先会把父盒子进行平分，后再排列

     wrap-reverse：进行反转换行后排列

flex-flow属性是flex-direction和flex-wrap的总写，默认：row  nowrow；

4、justify-content--设置主轴方向上的对齐

     flex-start：主轴顶端对齐（从左到右），默认值

     flex-end：主轴末端对齐，让子项目从容器的后面排序

     center：主轴居中对齐，让子项目在父容器中间显示

     space-between：两端对齐，左右盒子贴近盒子，中间平均分布空白区域

     space-around：把剩余的空间分布到项目的两侧，会把子项目与子项目之间撑开，子项目与父盒子之间也存在距离，子项目与子项目的距离大于子项目与父盒子的距离

     space-evenly：把剩余空间均等分布到项目的两侧，子项目与子项目的距离等于子项目与父盒子的距离

 

5、align-items--设置侧轴方向上的对齐（侧轴存在单行的情况）

     flex-start：侧轴顶端对齐

     flex-end：侧轴末端对齐

     center：侧轴居中对齐

    baseline：基线对齐，以第一行的文字的基线对齐，下图中的foo就是基线对齐

    stretch：子项目没有高度，由内容撑开是，stretch拉伸子项目，拉伸至填充父盒子的高度

 

6、align-content--定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。

     flex-start：侧轴顶端对齐，默认值

     flex-end：侧轴末端对齐

     center：侧轴居中对齐

     space-between：两端对齐，左右盒子贴近盒子，中间平均分布空白区域

     space-around：把剩余的空间分布到行两侧

     space-evenly：把剩余的空间均等分布到行两侧

align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用

弹性容器子项目的属性

1、align-self--设置单个子项目在侧轴的对齐方式

     auto：如果父元素有align-items属性的时候，auto的值继承align-items属性，默认值。如果父元素没有align-items属性的时候，auto为“stretch”

     stretch：拉伸，把子元素的侧轴的长度拉伸至父元素的长度（在子元素不设置高度或宽度）

     center：元素位于容器的开头

     flex-start：元素位于容器的顶端

     flex-end：元素位于容器的末端

2、order--设置子项目排列的优先级，数字越大越往后排，默认为0，不需要单位，支持负数

3、flex--设置子项目在主轴上的空间分配

（1）先统计flex数字之和，把flex容器分为数字之和份，flex:1;说明这个容器为1/数字之和；

（2）四个容器，前三个有宽度，最后一个设置为flex:1;说明用容器的宽度减去前面三份的宽度，剩下的宽度换分为一份，为第四个盒子的宽度（当子项目中有一些项目有固定宽度，用flex容器的宽度减去子项目固定的宽度，用剩余的宽度分成flex数字总和的份数）

• flex: 0 0 200px;
• 放大倍数，缩小倍数，占用宽度。
• 第一个参数，表示放大的比例，不放大。
• 第二个参数，表示缩小的比例，不缩小。
• 第三个参数200px，表示大小固定200px。

 

4、flex-xxx 

（1）flex-grow：设置子项目的放大比例 先把我们的flex-grow数字相加，然后等分为相应的份数 再把值加在原来的宽度之上 把剩余空间等比例（flex-grow数字之和）放大，然后分到对应的flex-grow中

 

（2）flex-shrink：设置子项目的压缩比例，默认值为1，所有子项目都进行一比一压缩，如果需要不压缩 设置flex-shrink:0;

 

（3）flex-basic：设置子项目在主轴上的长度。当主轴水平排列当成width属性来使用 当主轴垂直排列当成height属性来使用

 

如果父元素设置为弹性容器之后，子元素不再有块级元和行内元素之分，子元素的浮动、定位（绝对定位和固定定位）都失效

多列属性

1、column-count--设置元素应该被分隔的列数

适用于：除table外的非替换块级元素, table cells, inline-block元素 table不能用，其他的块级元素都能用

2、column-gap--设置列之间的间隔大小

3、column-rule--设置列与列之间的分割线

    column-rule-color规定列之间规则的颜色。

    column-rule-style规定列之间规则的样式。

    column-rule-width规定列之间规则的宽度。

4、column-span--设置检索对象元素是否横跨所以列

    none：不跨列 all：横跨所有列

5、column-width--设置列的最小宽度

6、column--设置或检索对象的列数和每列的宽度

    <' column-width '> || <' column-count '>