html+css学习第八天（弹性布局）

一、什么是弹性布局

弹性布局，又称为flex布局布局，是css3.0新增的布局方式。

        弹性布局，用来给盒模型提供最大的灵活性。

        任何一个容器，都可以被设置弹性布局。

        采用弹性布局的标签，父元素被称为flex容器，简称为“容器”；它的所有子元素自动成为容器成员，子元素称为flex项目，简称为“项目”；

        flex布局的属性：

                容器属性和项目属性。

        容器默认存在两根轴线：

                水平方向的主轴和垂直方向的交叉轴。

二、弹性布局flex

定义弹性布局 ：display: flex;

        flex布局，会影响子元素的布局方式。

        flex布局中的元素，子元素不再参与原有的流式布局，而是参与弹性布局。

        flex中，无论是行元素还是块元素，都会按照flex的方向进行排列。

1.flex-direction: 设置弹性布局中项目的排列方向。

        值：

                row：默认值，项目从左到右主轴排列，起点在左端。

                row-reverse：项目从右往左排列，起点在右端。

                column：项目从上往下交叉轴排列，起点在顶端。

                column-reverse：项目从下往上交叉轴排列，起点在下端。

2.justify-content: 项目在主轴的对齐方向。

        值：

                flex-start：所有的项目在起始线对齐；

                flex-end：所有的项目在终止线对齐；

                center：所有项目在中间线对齐；居中；

                space-around：项目两端间距相等，项目之间的间距相等，是项目到两端的2倍。

                space-between：项目两端对齐，项目之间的间距相等。

                space-evenly：项目之间的间距与项目到两端的间距相等。

注意：

        项目从左往右排列的时候，起始线在左端，反之则在右端。

3.align-items: 定义当行项目在交叉轴如何对齐。

        值：

                center：项目在交叉轴中点对齐。

                flex-start：项目在交叉轴的起点对齐。

                flex-end：项目在交叉轴的终点对齐。

4.flex-wrap: 定义项目在主轴一行排列不下时，如何换行。

        值：

                nowrap：默认值，不换行。

                wrap：换行显示，第一行在上方。

                wrap-reverse：换行显示，第一行在下方。

注意：

        flex布局默认不换行。

5.align-content: 定义多跟轴线在交叉轴如何对齐。如果项目只有一根轴线，则该属性不起作用。

        值：

                center：多跟轴线在交叉轴的中点对齐。

                flex-start：多条轴线在交叉轴的起点对齐。

                flex-end：多条轴线在交叉轴的终点对齐。

                space-around：轴线两端的间距相等，轴线之间的间距相等，是轴线两端的2倍。

                space-between：多条轴线两端对齐，轴线之间间距相等。

                space-evenly：轴线两端的间距与轴线之间的间距相等。

-------------------------------------------弹性布局——项目属性------------------------------------------------

6.order：定义项目的排列顺序。

        值：

                number，默认为0，值越小越靠前。

7.flex-grow: 定义项目的放大比例。

        值：

                number，默认值为0，存在剩余空间，也不放大。

                放大空间为主轴的剩余空间。

8.align-self: 允许当个项目有与其他的项目在交叉轴有不同的对齐方式。

        值：

                start：主轴的起点。

                center：主轴的中点。

                end：主轴的终点。

9.flex-basis: 定义项目占据的主轴空间。

eg：

        flex-basis: 20%;

10.flex-shrink: 定义项目的缩小比例。

        值：

                number，默认值为1，当空间不足时，该项目将缩小。

                如果所有项目flex-shrink: 都为1，表示当空间不足时，项目将等比例缩小。

                如果flex-shrink取值为0时，表示当空间不足时，项目不缩小。

                flex-shrink: 属性取值越大，表示当空间不足时，项目缩小的越快，空间缩小的越厉害。