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

站长

2022年12月03日 22:44 · 阅读数 25

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>

页面效果：

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

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

父容器的六大属性

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

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

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>

页面效果：

最流行的布局方案 Flex 弹性盒布局详解当把wrap-reverse换成wrap：

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

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>

最流行的布局方案 Flex 弹性盒布局详解 justify-contet属性为flex-end时：

最流行的布局方案 Flex 弹性盒布局详解 justify-content属性为center：

最流行的布局方案 Flex 弹性盒布局详解 justify-content属性为space-between：

最流行的布局方案 Flex 弹性盒布局详解 justify-content属性为space-around：

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

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>

页面效果：

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

align-items属性取flex-end:

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

align-items属性取center

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

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

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

我们尝试将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 弹性盒布局详解

当我们通过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>

页面效果：

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

align-content属性为flex-end：

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

align-content属性为center：

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

align-content属性为space-between：

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

align-content属性为space-around：

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

我们来尝试一下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 弹性盒布局详解

我们可以看到由于修改了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>

页面效果：

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

由于第一个子元素的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>

页面效果：

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

如上图所示，实际上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>

页面效果：

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

如上图所示： 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>

页面效果：

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

从上图我们可以看出，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="align-self: flex-end;">third</div>
		<div id="forth">forth</div>
	</div>
</body>

页面效果：

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