Flex Box布局学习- 语法

简介

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

先看一下flex布局的总体图，然后我们再慢慢学习。

Flex Box 是什么？

CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

任何一个容器都可以指定为Flex布局。

容器内可以包含一个或者多个弹性子元素。弹性子元素通常在弹性盒子内一行显示。默认情况下每个容器只有一行。

e.g.：

.box{
display: flex;
}
// 行内元素也可以
.box{
display: inline-flex;
}

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

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”子元素”。



容器默认存在两根轴：

水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

1. flex-direction属性

flex-direction属性决定主轴的方向（即子元素的排列方向）。

.box {
flex-direction:  column-reverse | column  | row | row-reverse ;
}

它有4个值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2. justify-content属性

justify-content

属性定义了项目在主轴上的对齐方式。

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

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

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3. align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

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

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

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

4. flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行，以及它的换行方式。

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值:

nowrap（默认）：不换行。



wrap：换行，第一行在最上方。



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

5. align-content属性

align-content属性用于修改flex-wrap属性的行为。类似于align-item,但它不是设置弹性元素的对齐，而是设置各个行的对齐。

如果弹性元素只有一行，该属性不起作用。

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值：

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

弹性子元素的属性

以下6个属性设置在弹性子元素上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

1. order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
order: <integer>;
}

2. flex属性

1. flex-grow属性

flex-grow属性赋予子元素在必要时伸展的能力，可指定一个不带单位的数值，作为父容器剩余空间的比例，它表示子元素在flex容器中可以分配多少可用的空间。

如果所有声明了flex-grow的子元素都指定flex-grow为1，那么父容器剩余的空间将会平均的分配到这些子元素上。如果其中一个flex-grow指定为2，那么容器将会试图为其分配一个空间，这个空间2倍于那些flex-grow为1的子元素。

需要注意的是，我们说的剩余空间，是指除子元素内容以外的父容器可用空间，另外，父容器并不保证所有情况下都能均匀分配，但至少它会这样尝试。

flex-grow的值不能为负。

每个弹性子元素没有设置宽度，是自由伸展的，那么子元素的宽度就是本身flex item1所占的宽度。如eg.1



容器宽度：200

弹性子元素宽度：100

html:

<div class="flex-container">
<div class="flex-item" style="flex-grow: 1;">flex item</div>
<div class="flex-item" style="flex-grow: 2;">flex item</div>
<div class="flex-item" style="flex-grow: 1;">flex item</div>
</div>

如果每个弹性子元素设置宽度100，那么子元素的宽度就是100，除去子元素后的部分按flex-grow比例进行分配。

2. flex-shrink属性

flex-shrink属性表示一个子元素在必要时是否收缩自己来适应当前的Flexbox，默认值是1。

注意：flex-shrink不能为负值。

flex-shrink适合使用在固定尺寸的子元素上，默认情况下，固定大小的子元素并非始终保持设定的值，比如在父容器太小时，就会压缩子元素来适应，如果我们不想这些子元素被压缩，就可以使用flex-shrink，并设置其值为0。

eg1：

<div class="flex-container">
<div class="flex-item" style="flex-shrink: 2;">flex item1</div>
<div class="flex-item" style="flex-shrink: 1;">flex item2</div>
<div class="flex-item" style="">flex item3</div>
</div>

容器宽度：200

弹性子元素宽度：100

收缩比例为：2：1：1

所以：100*3-200=100，超出100，按比例划分，就是item1被移除溢出量=100/(2+1+1) * 2=50;item2被移除溢出量=100/(2+1+1) * 1;item3被溢出量=100/(2+1+1)*1。

eg2：

如果其中有一个元素设置了flex-shrink: 0;则其宽度不会收缩，其他部分按比例收缩即可。

3. flex-basis 属性

flex-basis属性告诉父容器，在剩余空间被分配之前先定义子元素的默认尺寸，可以指定为百分比或rem等长度单位或者auto关键字。

如果设置为0，那么父容器分配分配之前，对每个子元素的默认尺寸都视之为0，剩余空间也就是父容器的全部空间，其结果是，直接按照flex-grow值的比例分配子元素整体的大小；

如果设置为auto，那么父容器会将每个子元素中的内容作为子元素默认尺寸，然后再计算剩余空间，最后把剩余空间按照flex-grow值的比例平均分配到子元素除内容以外的空间，也就是”padding”。

4. flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

3. align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

属性值各个值解释 - 自己的解释

一般大家都会看到好多个属性的取值中都有

flex-start

、

flex-end

、

center

、

space-between

、

space-around

这几个取值范围。那么下面就详细解释一下每个取值的含义。因为之前总是各个属性值组合起来用的，很是混乱。

刚开始看阮一峰老师的讲解时，有个地方自己理解错了， 所以特意自己截图来说明一下。可能有小伙伴和我一样也理解错了。



比如上图，只是看这个图，我就会认为，设置为

center

属性就会展示成上图中center的这个样子，其实这样的理解是有一点点偏差的。

以justify-content 属性为例进行说明。

justify-content：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

1. flex-start

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。也就是左对齐。

—w3c的解释

左对齐的意思就是说，从main-start边线，一个紧挨着一个向右排列，中间没有空隙的。例如，下图：

2. flex-end

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

—w3c的解释

如下图所示：

3. center

弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

—w3c的解释

如下图所示：


]

4. space-between

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

—w3c的解释

如下图所示：

5. space-around

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

如下图：



所以最上面个那个综合的图片中，其实是为了看起来更加方便，是给每个子元素添加了外边距，外边距算作每个元素的样式。所以看起来是上面个综合图的样子。

总结

上面的每个属性全部介绍完了，我们再来复习一下这个flex属性总体图：

参考

Flex 布局教程：语法篇

CSS3 弹性盒子(Flex Box)

实例学习

推荐：一劳永逸的搞定 flex 布局

写在后面

GitHub上集大家之力搞了一个前端面试题的项目，里面都是大家面试时所遇到的题以及一些学习资料，有兴趣的话可以关注一下。如果你也有兴趣加入我们的话，请在项目中留言。项目同时也可以在gitbook上查看。

InterviewLibrary-GitHub

InterviewLibrary-gitbook