前言
FlexBox 是一种布局方式，称为弹性布局。它可以使容器内的元素对于不同的设备和屏幕尺寸自适应，而无需使用繁琐的 CSS 属性实现定位和布局。FlexBox 已经成为了前端开发中不可或缺的一部分，本文将为各位前端工程师提供一个完整的 FlexBox 教程。
什么是 FlexBox？
FlexBox 布局是将父容器分成行或列，并在其中添加一个弹性盒子，使其子元素更加灵活的定位。在 FlexBox 布局中，可以通过调整子元素的大小、间距、方向和对齐方式，来实现布局。
FlexBox 最初是在 Visual Basic 中实现的，并在 2009 年加入了 CSS 规范中，并在 2012 年正式发布了第一版。其目的是用于竞争性开发环境，以确保元素可以在不同设备和屏幕尺寸上自适应布局。
FlexBox 容器和元素
在使用 FlexBox 布局时，我们需要将需要布局的元素包含在一个父容器中，并将这个父容器作为一个 FlexBox 容器。然后在父容器中使用属性来定义子元素的布局。
以下是一个示例的 HTML 代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
要将上面的代码转换成 FlexBox 布局，我们需要将这些元素的父容器设置为 FlexBox 容器，并为每个子元素设置一些属性。
以下是一个示例的 CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- - ----- - ------ ------ ------- ------ ------- ----- ----------------- -------- -
在上面的示例中，我们将父容器（即 .container）设置为 FlexBox 容器，并设置其 flex-direction 属性为 row，以将子元素按水平方向排列。我们还为每个子元素（即 .item）设置了一些基本属性。
FlexBox 的主要属性
在 FlexBox 布局中，使用以下几个属性来控制子元素的布局：
display
display 属性用于设置元素的布局模式。设置为 flex 时，该元素将作为 FlexBox 容器显示。
.container {
display: flex;
}flex-direction
flex-direction 属性用于设置弹性盒子的方向，可以是以下四个值之一：
row：默认值，按水平方向排列。column：按垂直方向排列。row-reverse：按水平方向反向排列。column-reverse：按垂直方向反向排列。
.container {
flex-direction: row;
}justify-content
justify-content 属性用于定义容器中子元素的水平方向对齐方式。
flex-start：默认值，左对齐。flex-end：右对齐。center：居中对齐。space-between：在剩余空间中平均分配子元素之间的间距。space-around：在子元素之间和两端平均分配空间。
.container {
justify-content: center;
}align-items
align-items 属性用于定义容器中子元素的垂直方向对齐方式。
stretch：默认值，子元素占满整个容器。flex-start：顶部对齐。flex-end：底部对齐center：居中对齐。baseline：按照基线对齐。
.container {
align-items: center;
}align-content
align-content 属性用于定义 FlexBox 容器内所有子元素的垂直方向对齐方式，只有包含多行的容器使用该属性才有效果。
flex-start：顶部对齐。flex-end：底部对齐center：居中对齐。space-between：在剩余空间中平均分配子元素之间的间距。space-around：在子元素之间和两端平均分配空间。stretch：默认值，子元素占满整个容器。
.container {
align-content: center;
}flex-wrap
flex-wrap 属性用于设置子元素在容器中的换行方式。
nowrap：默认值，不换行。wrap：换行。wrap-reverse：反向换行。
.container {
flex-wrap: wrap;
}flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的缩写，用于简化样式。
.container {
flex-flow: row wrap;
}FlexBox 子元素的主要属性
在 FlexBox 布局中，使用以下几个属性来控制子元素的布局：
flex-grow
flex-grow 属性用于设置子元素的扩展比例，以及其中应该分配的任何剩余空间。
.item {
flex-grow: 1;
}flex-shrink
flex-shrink 属性用于设置子元素的收缩比例，以及应该分配的任何不足空间。
.item {
flex-shrink: 1;
}flex-basis
flex-basis 属性用于设置子元素的初始大小。
.item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的缩写，用于简化样式。
.item {
flex: 1 1 100px;
}order
order 属性用于控制子元素的顺序。
.item {
order: 1;
}FlexBox 的实例
接下来，让我们来看几个使用 FlexBox 布局的示例：
1. 等分排列布局
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ------- ------ ----------------- -------- -
在上面的示例中，我们将容器设置为 display: flex; 并将其子元素之间的间距分配到容器两端，使容器中的子元素等分排列。
2. 左侧固定和右侧可变宽度布局
<div class="container"> <div class="item fixed">固定宽度</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item variable">可变宽度</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ------ - ------ ------ ----------------- -------- - --------- - ---------- -- ----------------- ----- -
在上面的示例中，左侧的子元素具有固定的宽度和背景颜色，而右侧的子元素随着屏幕的调整而自动调整大小。
3. 水平和垂直居中的布局
<div class="container"> <div class="item">居中</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ------ ------ ------- ------ ----------------- -------- -
在上面的示例中，我们将容器设置为 display: flex;，并将子元素水平和垂直居中对齐。
总结
FlexBox 布局是前端开发中不可或缺的一部分。使用 FlexBox 布局可以轻松快速地实现子元素的自适应，而无需使用繁琐的 CSS 属性和定位布局。掌握 FlexBox 布局的基本原理和属性，可以将布局设计变得简单而灵活，有助于提高页面的响应性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459b776968c7c53b0bd21b9