前端中全部盒子靠左对齐_CSS3中的弹性盒子模型

新旧版本的弹性盒子模型

在之前，css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言，旧版本的内容与新版本还是有些出入。而且，从功能上来讲，旧版本的弹性盒子模型远远没有新版本的盒子模型强大，从兼容性来讲，二者在pc端ie9以下都存在着兼容性问题，但是在移动端，旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说，我们依然要将主要的精力放在新版本的弹性盒子模型的身上，因为旧版本的弹性盒子模型淘汰是必然，随着手机端的兼容性逐渐提升，旧版本必将被淘汰。另外，新版本具有更加强大的功能，也值得我们进行深度的学习。那么我们对于新旧两个版本的弹性盒子模型，我们只需要抱着对比的心态学习即可，掌握新版本，了解旧版本，这样即使有一天我们需要使用旧版本，也可以非常容易的学习旧版本的弹性盒子模型。

相关概念

• 主轴

我们以元素排在一行为例，当元素排列在一行的时候，主轴既表示元素排列的方向，横向排列则主轴即可以理解为一条横线，又因为我们元素默认是从左向右排列，那么我们可以说在默认的情况下，元素的主轴的起始位置是在左，而方向为右，终点也为右。

• 侧轴

元素垂直的方向即为侧轴。默认上为起点，下为终点。

• 弹性容器

我们想要使用弹性盒子模型，就需要将容器转换为弹性容器，我们说一个包含于子元素的容器设置了display:flex，那么这个容器也就变成了弹性容器。

• 弹性子元素

当子元素的父元素变成了弹性容器，那么其中的所有的子元素也自然而然的变成了弹性子元素。

如何创建一个弹性容器：

display:flex | inline-flex

弹性容器属性

• flex-direction

弹性容器中子元素的排列方式(主轴排列方式)

属性值：

row:默认在一行排列

row-reverse:反转横向排列(右对齐，从后往前排，最后一项排在最前面。)

column：纵向排列。

column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

 flex-direction

1

2

3

4

• flex-wrap

设置弹性盒子的子元素超出父容器时是否换行

属性值：

nowrap: 默认值。规定元素不拆行或不拆列。

wrap:规定元素在必要的时候拆行或拆列。

wrap-reverse:规定元素在必要的时候拆行或拆列，但是以相反的顺序。

 flex-wrap

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

• flex-flow

flex-direction 和 flex-wrap 的简写

 flex-wrap

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

• align-item

设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式

相关属性值：

flex-start：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

 align-item

1

2

3

4

• ** align-content**

修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐(行与行的对其方式).

相关属性：

flex-start： 没有行间距

flex-end： 底对齐没有行间距

center ：居中没有行间距

space-between：两端对齐，中间自动分配

space-around：自动分配距离

请注意本属性在只有一行的伸缩容器上没有效果。

 align-content

1

2

3

4

5

6

7

8

9

10

11

12

13

• justify-content

设置弹性盒子元素在主轴(横轴)方向上的对齐方式

相关属性：

flex-star：t默认，顶端对齐

flex-end：末端对齐

center：居中对齐

space-between：两端对齐，中间自动分配

space-around：自动分配距离

 justify-content

1

2

3

4

5

6

弹性子元素属性

• order

设置弹性盒子的子元素排列顺序。 number排序优先级，数字越大越往后排，默认为0，支持负数。

• flex-grow

设置或检索弹性盒子元素的扩展比率。

• flex-shrink

设置或检索弹性盒子元素的收缩比率。

• flex-basis

用于设置或检索弹性盒伸缩基准值

• flex

设置弹性盒子的子元素如何分配空间,是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

• align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。值与容器属性一样，只是这个是单独的设置某个元素。

点击【右上角，关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学

8年开发老码农福利赠送：网页制作，网站开发，web前端开发，从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端小程序项目实战【视频＋工具＋系统路线图】都有整理，送给每一位对编程感兴趣的小伙伴

获取方式：

右上角有私信，请私信发我：01 即可获取！