前端框架架构师之Flex 布局

1 Flex 布局

1.1 Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

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

.box {
    display: flex;
}

行内元素也可以使用 Flex 布局。

.box {
  display: inline-flex;
}

• flex： 将对象作为弹性伸缩盒显示，没有为父元素设置宽度，默认为100%。
• inline-flex：将对象作为内联块级弹性伸缩盒显示，父元素默认会根据子元素的宽高去自适应。

注意：flex 布局的子元素不会脱离文档流，flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。

<style>
    .flexbox{
        display: flex;
        height: 200px;
        background: #ffff00
    }
</style>
<div class="flexbox">
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
</div>

1.2 基本概念

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

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

1.3 容器的属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1.3.1 flex-direction

flex-direction 属性决定主轴的方向（即项目的排列方向）。

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

有4个值。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

<style>
    .flexbox {
        display: flex;
        flex-direction: column;
        height: 400px;
        background: #ffff00
    }

    .flexbox-item {
        width: 50px;
        height: 50px;
        margin: 2px;
        background: #00ffff
    }
</style>
<div class="flexbox">
    <div class="flexbox-item">1</div>
    <div class="flexbox-item">2</div>
    <div class="flexbox-item">3</div>
    <div class="flexbox-item">4</div>
    <div class="flexbox-item">5</div>
    <div class="flexbox-item">6</div>
    <div class="flexbox-item">7</div>
    <div class="flexbox-item">8</div>
    <div class="flexbox-item">9</div>
    <div class="flexbox-item">10</div>
    <div class="flexbox-item">11</div>
    <div class="flexbox-item">12</div>
    <div class="flexbox-item">13</div>
    <div class="flexbox-item">14</div>
    <div class="flexbox-item">15</div>
</div>

1.3.2 flex-wrap

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

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

可取三个值。

nowrap（默认）：不换行。

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

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

1.3.3 flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

.box {
       flex-flow: <flex-direction> || <flex-wrap>;
}

1.3.4 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：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
• space-evenly：每个项目两侧的间隔相等，项目之间间隔比项目与边框的间隔相等

1.3.5 align-items

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

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

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

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline：项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

1.3.6 align-content

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

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

该属性可能取6个值。

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

1.4 弹性元素

放在容器盒子中的元素即为弹性元素。

• float、clear 和 vertical-align 属性将失效
• 弹性元素均为块元素
• 绝对定位的弹性元素不参与弹性布局

1.4.1 align-self

用于控制单个元素在交叉轴上的排列方式。

align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列， 能够覆盖容器的 align-items 属性。

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

可取4个值。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• stretch（默认值）：将空间平均分配给元素。

<style>
    .flexbox {
        display: flex;
        flex-direction: row;
        height: 400px;
        background: #ffff00
    }

    .flexbox-item {
        width: 50px;
        height: 50px;
        margin: 2px;
        background: #00ffff
    }

    .flexbox-item:nth-child(1){
        align-self: flex-end
    }

    .flexbox-item:last-child{
        align-self: center
    }
</style>
<div class="flexbox">
    <div class="flexbox-item">1</div>
    <div class="flexbox-item">2</div>
    <div class="flexbox-item">3</div>
    <div class="flexbox-item">4</div>
    <div class="flexbox-item">5</div>
    <div class="flexbox-item">6</div>
    <div class="flexbox-item">7</div>
    <div class="flexbox-item">8</div>
    <div class="flexbox-item">9</div>
    <div class="flexbox-item">10</div>
    <div class="flexbox-item">11</div>
    <div class="flexbox-item">12</div>
    <div class="flexbox-item">13</div>
    <div class="flexbox-item">14</div>
    <div class="flexbox-item">15</div>
</div>

1.4.2 flex-grow

控制剩余空间是否放大，默认0，即如果存在剩余空间，也不放大。适合不确定文字数量自适应宽度。

剩余空间就是父容器在主轴的方向上还有多少可用的空间。

/* 为三个DIV 弹性元素设置了1、3、6 ，即宽度分成10等份，第三个元素所占宽度为(宽度/(1+3+6)) X 6。 */
.box-item.item01 {
    flex-grow: 1;
}
.box-item.item02 {
    flex-grow: 3;
}
.box-item.item03 {
    flex-grow: 6;
}

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。 如果弹性元素设置了宽度，将把（弹性盒子 - 弹性元素宽度和）后按照 flex-grow 进行分配 。

<style>
    .flexbox {
        display: flex;
        width: 600px;
        height: 200px;
        background: #ffff00
    }

    .flexbox-item:nth-child(1){
        background: #00ffff;
        flex-grow: 1
    }

    .flexbox-item:nth-child(2){
        background: #ff00ff;
        flex-grow: 3
    }

    .flexbox-item:nth-child(3){
        background: #ff0000;
        flex-grow: 6
    }
</style>
<div class="flexbox">
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
</div>

1.4.3 flex-shrink

控制空间不够的时候是否缩小，默认 1，即如果空间不够则缩小，可以正常展示全该展示的东西，比如 icon、图片等，如果设为 0，则会出现超出截断的问题。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。负值对该属性无效。

.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 150px;
    height: 150px;
    margin: 2px;
    flex-shrink: 1;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    flex-shrink: 0
}

.flexbox-item:last-child{
    flex-shrink: 3
}

1.4.4 flex-basis

• 定义了在分配多余空间之前，弹性元素占据的主轴空间（main size）。

• 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即弹性元素的本来大小。

• 属性值的作用也就是width的替代品。

取值：

• 长度单位
• 百分比

flex-basis 的优先级高于 width、height 属性。 优先级 flex-basis 优先级大于 width、height。主轴方向。

注意：flex-basis 和 width 为 auto 值，那最后的空间就是根据内容多少来定的，内容多占据的水平空间就多。

弹性元素取值优先级高到低：

• max-width、max-height、min-width、min-height
• flex-basis
• width、height
• 内容本身的size

.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    flex-basis: 100px;
}

.flexbox-item:nth-child(2){
    flex-basis: 200px;
}

1.4.5 flex

flex 是 flex-grow、flex-shrink 、flex-basis 综合写法。

语法：

• flex:flex-grow flex-shrink flex-basis;
• flex:0 1 auto;(默认值)
• 后两个属性可选

注意：

• 一个值
  • 一个无单位的值会被认为 flex-grow 的值
  • 一个有效单位的宽度值，会被认为 flex-basis
• 两个值
  • 第一个值必须是：无单位数，认为是 flex-grow
  • 第二个值必须是：一个无单位数：认为是 flex-shrink；一个有效单位宽度：认为是 flex-basis
• 三个值
  • 第一个值必须是无单位数，认为是 flex-grow
  • 第二个值必须是无单位数，认为是 flex-shrink
  • 第三个值必须是有效单位宽度，认为是 flex-basis

1.4.6 order

用于控制弹性元素的排列顺序，默认为 order:0，数值越小，排列越靠前，可以负数或整数。

.item {
    order: 1;
}

1.4.7 圣杯布局

<style>
	html,
	body {
		height: 100%;
	}

	.demo {
		display: flex;
		height: 100%;
		flex-direction: column;
	}

	.main {
		display: flex;
		flex: 1;
	}

	.header,
	.footer {
		height: 50px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #737070
	}

	.left,
	.right {
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d1eccd;
	}
</style>
<div class="demo">
	<header class="header">头部</header>
	<section class="main">
		<aside class="left">left</aside>
		<section class="center">center</section>
		<aside class="right">right</aside>
	</section>
	<footer class="footer">底部</footer>
</div>

1.4.8 双飞翼布局

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		height: 600px;
	}

	.main {
		background: red;
	}

	.sub {
		background: blue;
	}

	.extra {
		background: yellow;
	}

	.container {
		display: flex;
	}

	.main {
		flex-grow: 1;
	}

	.sub {
		flex: 0 0 150px;
		order: -1;
	}

	.extra {
		flex: 0 0 200px;
		order: 1;
	}
</style>
<section class="container">
	<div class="main">中间栏，位于文档流的最前面</div>
	<div class="sub">sub 左边栏</div>
	<div class="extra">extra 右边栏</div>
</section>

1.4.9 弹性文本

文本节点也在弹性布局操作范围内

<style>
	.text {
		display: flex;
		height: 100vh;
		align-items: center;
	}
</style>
<div class="text">弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，</div>

1.4.10 绝对定位

绝对定位的弹性元素不参与弹性布局。

<style>
	.box {
		display: flex;
		height: 200px;
		position: relative;
	}

	.box-item {
		flex: 1;
		border: 1px solid #bbb
	}

	.box-item:last-child {
		background: #00ff00;
		position: absolute;
		width: 80px;
		height: 80px;
	}
</style>
<div class="box">
	<div class="box-item"></div>
	<div class="box-item"></div>
	<div class="box-item"></div>
</div>

1.4.11 自动空间

在弹性布局中对元素使用 margin-right:auto 等形式可以自动撑满空间。

下例为第一个 ul 设置 margin-right:auto 表示右侧空间自动撑满，第二个 ul 靠近父元素右边界。

<style>
	* {
		margin: 0;
		padding: 0
	}

	ul {
		list-style: none
	}

	.container {
		width: 600px;
		margin: 0 auto;
	}

	nav {
		display: flex;
		align-items: center;
		border: solid 1px green;
		height: 60px;
		background: #f3f3f3;
	}

	ul:nth-child(1) {
		display: flex;
		align-items: center;
		margin-right: auto;
	}

	ul:nth-child(1)>li {
		margin: 0 10px;
	}

	ul:nth-child(2) {
		display: flex;
	}

	ul:nth-child(2)>li {
		display: flex;
		width: 50px;
		height: 50px;
		color: #fff;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		background: #9b59b6;
	}
</style>
<div class="container">
	<nav>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</nav>
</div>

1.5 练习作业

• 使用 Flex 布局实现骰子。

<img src="https://gitee.com/rawait/rwpicgo/raw/master/teaching/2021-12-19/202112200006945.jpg" alt="001" style="zoom:67%;" />

• 使用 Flex 布局实现一行四列平分布局。