最流行的布局方案 Flex 弹性盒布局详解

Posted 2022-09-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最流行的布局方案 Flex 弹性盒布局详解相关的知识，希望对你有一定的参考价值。

Flex布局又称弹性盒布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。

弹性盒布局简介

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为flex 或 inline-flex将其定义为弹性容器，不遵循标准文档流的显示方式。
弹性容器外以及弹性子元素内部仍遵循标准文档流，弹性盒布局只是定义了弹性子元素在弹性容器内部的布局方式。
弹性容器添加display: flex属性显示为块级元素，添加display: inline-flex显示为行级元素。
设为弹性盒布局以后弹性子元素的float、clear和vertical-align属性将失效，但position属性，依然生效。

示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    width: 350px;
    height: 150px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;
    margin-right: 5px;

</style>
<body><div id="container"><div id="first">first</div><div id="second">second</div><div id="third">third</div><div id="forth">forth</div></div>
</body>

页面效果：

最流行的布局方案

如上图所示，弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行。

父容器的六大属性

了解两个基本方向，这个牵扯到弹性布局的使用：

主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴
交叉轴：与主轴垂直的另一方向，称为交叉轴

1、flex-direction属性
决定弹性子元素的排列方向（即定义了主轴方向），可选值：

row（默认值）：主轴为水平方向，起点在左端，子元素从左至右排列；
row-reverse：主轴在水平方向，起点在右端，子元素从右至左排列；
column：主轴为垂直方向，起点在上沿，子元素从上向下排列；
column-reverse：主轴为垂直方向，起点在下沿，子元素从下向上排列；

2、flex-wrap属性
定义如果一行排列不下如何换行，可选值：

nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；
wrap：换行，并且第一行在容器最上方；
wrap-reverse：换行，并且第一行在容器最下方；

示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap-reverse;
    width: 350px;
    height: 200px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;
    margin-right: 5px;

</style>
<body>
    <div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="forth">forth</div>
        <div id="five">five</div></div>
</body>

页面效果：

最流行的布局方案

当把wrap-reverse换成wrap：

最流行的布局方案

3、flex-flow属性
flex-direction和flex-wrap的缩写形式，默认值为：row wrap，可以将flex-direction的可选值和flex-wrap的可选值进行任意组合，此处不再做过多赘述。
4、justify-content属性
定义了子元素在在主轴上的对齐方式（此属性与flex-direction息息相关，当flex-direction的取值为row时，起点在主轴左边，取值为row-reverse时起点在主轴右边，column起点在主轴上边，column-reverse-起点在主轴下边）

flex-start（默认值）：项目位于主轴起点。
flex-end：项目位于主轴终点。
center：居中
space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔，间隔为项目间间隔的一半)

示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    justify-content: flex-start;
    width: 350px;
    height: 200px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;

</style>
<body><div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="forth">forth</div>
    </div>
</body>

最流行的布局方案

justify-contet属性为flex-end时：

最流行的布局方案

justify-content属性为center：

最流行的布局方案

justify-content属性为space-between：

最流行的布局方案

justify-content属性为space-around：

最流行的布局方案

5、align-items属性
定义子元素在交叉轴上的对齐方式（flex-direction属性定义主轴方向，与之相垂直的就是交叉轴方向）

flex-start：子元素按照交叉轴的起点对齐。
flex-end：子元素按照交叉轴的终点对齐。
center：子元素按照交叉轴的中点对齐。
baseline：子元素按照第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 350px;
    height: 200px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;

</style>
<body><div id="container"><div id="first">first</div><div id="second">second</div><div id="third">third</div><div id="four">four</div></div>
</body>

页面效果：

最流行的布局方案

align-items属性取flex-end:

最流行的布局方案

align-items属性取center

最流行的布局方案

增加第一个子元素的高度和字体大小，align-items属性取baseline

最流行的布局方案

我们尝试将flex-direction属性修改为column，我们一起来看看会对align-items属性的页面效果产生什么影响：
示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 350px;
    height: 200px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;

</style>
<body><div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
    </div>
</body>

页面效果：

最流行的布局方案

当我们通过flex-direction属性修改主轴方向时交叉轴的方向也随之改变，因此弹性子元素的交叉轴排列方式也随之改变。大家可以自己尝试不同flex-direction取值下align-items属性对于页面布局的影响，此处限于篇幅原因不再一一尝试。
6、align-content属性
修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐，即align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
（可以将其视为多行情形下的align-items属性）

flex-start：子元素按照交叉轴的起点对齐。
flex-end：子元素按照交叉轴的终点对齐。
center：子元素按照交叉轴的中点对齐。
space-between：子元素按照交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 350px;
    height: 200px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;

</style>
<body><div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
        <div id="five">five</div>
        <div id="sex">sex</div>
        <div id="seven">seven</div>
        <div id="eight">eight</div></div>
</body>

页面效果：

最流行的布局方案

align-content属性为flex-end：

最流行的布局方案

align-content属性为center：

最流行的布局方案

align-content属性为space-between：

最流行的布局方案

align-content属性为space-around：

最流行的布局方案

我们来尝试一下flex-wrap属性取wrap-reverse时会对align-content属性的页面效果产生什么影响
示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    width: 350px;
    height: 200px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;

</style>
<body>
    <div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
        <div id="five">five</div>
        <div id="sex">sex</div>
        <div id="seven">seven</div>
        <div id="eight">eight</div>
    </div>
</body>

页面效果：

最流行的布局方案

我们可以看到由于修改了flex-wrap属性，子元素对齐的交叉轴起点也发生了改变，因此此时flex-start从底部开始对齐，大家可以自己尝试一下不同flex-wrap属性下align-content属性页面效果的不同，此处由于篇幅原因不再一一展示。

子容器的六大属性

1、order属性
定义弹性子元素排列顺序
用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0
示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    width: 350px;
    height: 200px;

#container div 
    background-color: yellow;
    width: 80px;
    height: 80px;

</style>
<body>
    <div id="container">
        <div id="first" style="order: 1;">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div></div>
</body>

页面效果：

最流行的布局方案

由于第一个子元素的order属性为1，其他都为0，所以first子元素排在最后面，其他的排在前面。
2、flex-grow属性
定义子元素的放大比例。用整数值规定项目将相对于其他灵活的项目进行扩展放大的量。默认值是 0，即如果存在剩余空间子元素也不扩展。
示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    width: 480px;
    height: 200px;

#container div 
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;

</style>
<body>
    <div id="container">
        <div id="first" style="flex-grow: 1;">first</div>
        <div id="second">second</div>
        <div id="third" style="flex-grow: 2;">third</div>
        <div id="four">four</div>
    </div>
</body>

页面效果：

最流行的布局方案

如上图所示，实际上first元素的宽度为原本元素宽度 + 剩余空间的宽度 x (1/3); third元素的宽度为原本元素的宽度 + 剩余空间的宽度 x (2/3)。
3、flex-shrink属性
定义了子元素的缩小比例。整数值规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1，即如果空间不足，该子元素将缩小。如果值为0，则该子元素不挤压宽度，如果所有子元素的flex-shirnk属性全为0，当宽度不够时部分子元素将挤出父容器。如果值越大，则该子元素收缩的量越大。
示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    width: 300px;
    height: 200px;

#container div 
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;

</style>
<body>
    <div id="container">
        <div id="first" style="flex-shrink: 1;">first</div>
        <div id="second" style="flex-shrink: 0;">second</div>
        <div id="third" style="flex-shrink: 2;">third</div>
        <div id="four" style="flex-shrink: 0;">four</div>
  </div>
</body>

页面效果：

最流行的布局方案

如上图所示：
second元素和forth元素的宽度都没有收缩，first元素的实际宽度 = first元素的正常宽度 - 不足的空间宽度 x (1/3)；third元素的实际宽度 = third元素的正常宽度 - 不足的空间宽度 x (2/3)
4、flex-basis属性
定义子元素占据的主轴空间，默认值为auto（如果主轴为水平，则设置这个属性类似于子元素宽度，子元素原width属性将失效；如果主轴为垂直，则设置这个属性类似于子元素的高度，子元素原height属性将失效）
可选值：

整数值或百分比，规定子元素占据主轴空间的初始值；
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    width: 360px;
    height: 200px;

#container div 
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;

</style>
<body>
    <div id="container">
        <div id="first" style="flex-basis: 100px">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
    </div>
</body>

页面效果：

最流行的布局方案

从上图我们可以看出，first元素的实际宽度为100px，覆盖之前定义的width：80px
5、flex属性
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。除了直接分别给flex-grow、flex-shrink 和 flex-basis赋值还可以选取以下值：

auto：与 1 1 auto 相同。
none：与 0 0 auto 相同。
initial：设置该属性为它的默认值，即为 0 1 auto。
inherit：从父元素继承该属性。

6、align-self属性
定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。
属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。
示例：

<style>
#container 
    border: 1px dashed red;
    display: flex;
    align-items: flex-start;
    width: 360px;
    height: 200px;

#container div 
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;

</style>
<body><div id="container"><div id="first">first</div><div id="second">second</div><div id="third" style="slign-self: flex-end;">third</div><div id="forth">forth</div></div>
</body>

页面效果：

最流行的布局方案

以上是关于最流行的布局方案 Flex 弹性盒布局详解的主要内容，如果未能解决你的问题，请参考以下文章

Flex弹性盒布局

div+css3弹性盒子(flex box)布局

弹性盒布局的属性和属性值

弹性盒子详解

弹性和flex布局