Flexible Box 弹性布局使用案例

2022-11-5

网页布局（layout）是 CSS 的一个重点应用。传统的布局解决方案是，基于盒状模型，依赖 display属性 + position属性 + float属性，但是它对于那些特殊布局非常不方便。

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

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局。

0.页面准备

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flex 弹性布局Demo</title>
        <style>
            .container {
                width: 500px;
                height: 600px;
                margin: 0 auto;
                background-color: #666;
            }
            .item {
                width: 100px;
                height: 100px;
            }

            .item1 {
                background-color: red;
            }

            .item2 {
                background-color: yellow;
            }

            .item3 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1">item1</div>
            <div class="item item2">item2</div>
            <div class="item item3">item3</div>
        </div>
    </body>
</html>

页面效果：

1. 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。

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

容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）[侧轴]。

主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

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

提示：您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

给父容器添加 Flex 布局属性效果演示：

display: flex;

display: inline-flex;

Webkit 内核的浏览器，必须加上-webkit前缀。

.container{
  display: -webkit-flex; /* Safari */
  display: flex;
}

CSS 中提供了以下属性来实现 Flex 布局：

属性	描述
display	指定 HTML 元素的盒子类型：flex / inline-flex
flex-direction	指定弹性盒子中子元素的排列方式：横向/纵向/..
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行: warp / unwarp/..
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
`justify-content`	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
`align-items`	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

按照作用范围的不同，这些属性可以分为两类：

容器属性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）
项目属性（order、align-self、flex、flex-grow、flex-shrink、flex-basis）

2. 容器属性

flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

值	描述
row	默认值，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴沿垂直方向从下到上
initial	将此属性设置为属性的默认值
inherit	从父元素继承此属性的值

示例代码如下：

.container {
    /* 添加 Flex 布局属性  */
    display: flex;

    /* flex-direction: row;  默认就是row */
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    flex-direction: column-reverse;
}

页面效果：

flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

值	描述
nowrap	默认值，表示项目不会换行
wrap	表示项目会在需要时换行
wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

示例代码如下：

 flex-wrap: nowrap;/* 默认值，表示项目不会换行 */
 flex-wrap: wrap; /*表示项目会在需要时换行 */
 flex-wrap: wrap-reverse;/* 表示项目会在需要时换行，但会以相反的顺序; */

效果展示：

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：

flex-flow: flex-direction flex-wrap;

示例代码如下：

justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

示例代码如下：

/* justify-content: flex-start; 默认值，左对齐*/
/* justify-content: flex-end; */
/* justify-content: center; 居中 */
/* justify-content: space-between;两端对齐，项目之间的间隔是相等的 */
/* justify-content: space-around; 每个项目两侧的间隔相等 项目中间间隔是两端间隔的二倍*/
/* justify-content: space-evenly; 每个项目两侧的间隔相等 */

效果展示：

align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，项目将被拉伸以适合容器,如果项目未设置高度或设为auto，将占满整个容器的高度。
center	项目位于容器的中央,交叉轴的中点对齐。
flex-start	项目位于容器的顶部,交叉轴的起点对齐。
flex-end	项目位于容器的底部,交叉轴的终点对齐。
baseline	项目的第一行文字的基线对齐,项目的第一行文字的基线对齐。
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

几个属性值的效果如下图所示：

/* align-items: stretch;默认值，项目将被拉伸以适合容器 */
/* align-items: center;项目位于容器的中央 */
/* align-items: flex-start;项目位于容器的顶部 */
/* align-items: flex-end;项目位于容器的底部 */
/* align-items: baseline;项目与容器的基线对齐 */

效果展示：

align-content

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，将项目拉伸以占据剩余空间,轴线占满整个交叉轴。
center	项目在容器内居中排布,与交叉轴的中点对齐。
flex-start	项目在容器的顶部排列,与交叉轴的起点对齐。
flex-end	项目在容器的底部排列,与交叉轴的终点对齐。
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部,与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等,每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
initial	将此属性设置为属性的默认值
inherit	从父元素继承该属性的值

注意：使用align-content设置属性时，需要设置flex-wrap: wrap;属性，允许换行。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

几个属性值的效果如下图所示：

flex-wrap: wrap;
/* align-content: stretch;默认值，将项目拉伸以占据剩余空间 */
/* align-content: center;项目在容器内居中排布 */
/* align-content: flex-start;项目在容器的顶部排列 */
/* align-content: flex-end; 项目在容器的底部排列 */
/* align-content: space-between;多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部 */
/* align-content: space-around;多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等 */

3. 项目属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flex 弹性布局Demo</title>
		<style>
			.container {
				width: 500px;
				height: 600px;
				margin: 0 auto;
				background-color: #666;
				/* 添加 Flex 布局属性  */
				display: flex;
			}
			
			.item {
				width: 100px;
				height: 100px;
			}
			
			.item1 {
				background-color: red;
				flex: 1;
			}
			
			.item2 {
				background-color: yellow;
				flex: 1;
			}
			
			.item3 {
				background-color: blue;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item item1">item1</div>
			<div class="item item2">item2</div>
			<div class="item item3">item3</div>
		</div>
	</body>
</html>

效果展示：

每个项目中的flex属性值代表占据宽度的比例：flex: 2;

order

order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，属性的语法格式如下：

order: number;

其中 number 就是项目在容器中的位置，默认值为 0。

示例代码如下：

.item1 {
    background-color: red;
    flex: 1;
    order: 3;
}

.item2 {
    background-color: yellow;
    flex: 2;
    order: 2;
}

.item3 {
    background-color: blue;
    flex: 1;
    order: 1;
}

效果展示：

align-self

align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：

值	描述
auto	默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”
stretch	项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

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

示例代码如下：

.item1 {
    background-color: red;
    flex: 1;
    order: 3;
}

.item2 {
    background-color: yellow;
    flex: 2;
    order: 2;
    align-self: center;
}

.item3 {
    background-color: blue;
    flex: 1;
    order: 1;
}

效果展示：

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

示例代码如下：

.item1 {
    background-color: red;
    flex-grow: 2;
}

.item2 {
    background-color: yellow;
    flex-grow: 2;
}

.item3 {
    background-color: blue;
    flex-grow: 1;
}

效果展示：

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

示例代码如下：

.item {
    width: 250px; /* 每个Item宽度为250 */
    height: 100px;
}

.item1 {
    background-color: red;
    flex-shrink: 3; /* 缩小比例最大 */
}

.item2 {
    background-color: yellow;
    flex-shrink: 1;
}

.item3 {
    background-color: blue;
    flex-shrink: 1;
}

效果展示：

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

示例代码如下：

.item {
    width: 100px; /* 每个Item宽度为100px */
    height: 100px;
}

.item1 {
    background-color: red;
    flex-basis: 150px;

}

.item2 {
    background-color: yellow;
    flex-basis: 150px;
}

.item3 {
    background-color: blue;
    flex-basis: 150px;
}

效果展示：

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

参数说明如下：

flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值）或者以具体的值加 "%"、"px"、"em" 等单位的形式。

另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。

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

示例代码如下：

<style>
    .flex {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-end;
        border: 1px solid #CCC;
    }

    .flex div {
        width: 60px;
        height: 60px;
        border: 1px solid black;
    }

    .flex div:nth-child(2) {
        background-color: aqua;
        flex: 0; /* 用来设置项目相对于其他项目的增长量，默认值为 0； */
    }

    .flex div:nth-child(4) {
        background-color: coral;
        flex: 1 1 auto;
    }
</style>

<div class="flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</div>

效果展示：