CSS flex布局

html-css019

CSS flex布局,第1张

flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便

首先是要指定flex布局

当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了

无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“ 容器 ”（flex container）

他们的子元素自动成为容器成员，被称为“ 项目 ”（flex item）。

flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位

每个容器都有两根轴，分别为水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end

容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。

每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size

flex布局下，容器和项目都有其各自的属性

决定主轴的方向，即决定项目的排列方向，其属性值有

决定了当一行放不下所有的项目时，其换行与否以及换行方式

定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列

定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列

在这里重点说一下上面这两个属性。

这样可以很方便的设置水平垂直居中

另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心

在容器内具有多根主轴线时，可以定义这些轴线的对齐方式

align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致

定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层

设置了项目的放大比例，其默认值为1。

设置了项目的缩小比例，默认值为1。

在分配多余空间之前，为项目定义其占据的主轴空间

用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。

很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，

同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的缩写,意为 弹性布局

flex布局中把一个元素作为容器，容器中的子元素称为项目

可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。

2.flex布局的方向

flex布局项目的排列方向可以有两个维度，一水平，二垂直

项目排列方向称为主轴，与主轴垂直的方向叫交叉轴

在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。

2.1 flex水平布局

在水平维度，默认方向是从左至右

可以通过 flex-direction：row-reverse设置为从右到左排列

效果图：

1).默认方向,从左至右

2).反方向

2.2 垂直布局

效果图：

1).默认方向，从上到下

2).反方向

3. 容器内项目换行

通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。

不换行的称为单行容器，换行的称为多行容器

也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）

效果图：

1).默认不允许换行，项目被压缩

2).允许换行，当剩余宽度不足容纳一个项目块时，就换行

相关知识：

css如何实现边框长度控制功能

详细介绍css中的数学表达式calc()

关于书籍：需要学习资料的小伙伴们可以加群， 点击此处

flex 大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。flex 属性（ flex：1 ）如就给容器内部项目设置的属性。

这里的 wrap 指容器，item 我们称作项目。我们还需要知道 flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。接下来我们逐一介绍这三个属性:

flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。

从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194，加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度，如果我们给它们加上 width 会怎么计算呢？

我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194，加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢？仔细看定义后知道，我们给 wrap 设置了 width 为 200px，三个 item 设置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。

设置项目的收缩比例，如果空间不足，该项目将缩小。

默认值为 1。

设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。