背景
在前端开发中，布局一直是一个重要的问题。随着 Web 应用的复杂化和多样化，布局也变得越来越复杂。在过去，我们常常使用 float 和 position 等方式来实现布局。但是这些方式并不够灵活，而且容易出现问题。为了解决这些问题，CSS3 引入了 Flexbox。
Flexbox 是一种强大的布局方式，可以轻松地实现复杂的布局。它可以让我们更加灵活地控制元素的位置和大小，而且可以适应不同的屏幕大小和设备类型。在企业级应用中，Flexbox 已经成为了一种必备的技术。
基本概念
在学习 Flexbox 之前，我们需要了解一些基本概念。
Flex Container
Flex Container 是一个包含 Flex Items 的容器。Flex Container 的属性可以控制其子元素的布局方式。
Flex Item
Flex Item 是 Flex Container 中的子元素。Flex Item 的属性可以控制其自身在 Flex Container 中的布局方式。
Main Axis 和 Cross Axis
Flex Container 有一个主轴和一个交叉轴。主轴是 Flex Container 的主要方向，交叉轴是与主轴垂直的方向。在 Flex Container 中，我们可以使用 justify-content 和 align-items 属性来控制 Flex Item 在主轴和交叉轴上的位置。
Flex Line 和 Flex Wrap
Flex Container 中的 Flex Item 可以排列成一行或多行。每一行称为一个 Flex Line。Flex Wrap 属性可以控制 Flex Item 是否换行。
Flex Container 的属性
Flex Container 有很多属性可以控制其子元素的布局方式。下面是一些常用的属性。
display
display 属性用来指定 Flex Container 的类型。默认值是 block。如果想要使用 Flexbox 布局，需要将其设置为 flex 或 inline-flex。
.flex-container {
display: flex;
}flex-direction
flex-direction 属性用来指定 Flex Container 的主轴方向。默认值是 row。可以设置为 row-reverse、column 或 column-reverse。
.flex-container {
flex-direction: row-reverse;
}justify-content
justify-content 属性用来指定 Flex Item 在主轴方向上的对齐方式。默认值是 flex-start。可以设置为 flex-end、center、space-between、space-around 或 space-evenly。
.flex-container {
justify-content: space-between;
}align-items
align-items 属性用来指定 Flex Item 在交叉轴方向上的对齐方式。默认值是 stretch。可以设置为 flex-start、flex-end、center、baseline 或 stretch。
.flex-container {
align-items: center;
}align-content
align-content 属性用来指定多行 Flex Item 在交叉轴方向上的对齐方式。默认值是 stretch。可以设置为 flex-start、flex-end、center、space-between、space-around 或 stretch。
.flex-container {
align-content: space-between;
}flex-wrap
flex-wrap 属性用来指定 Flex Item 是否换行。默认值是 nowrap。可以设置为 wrap 或 wrap-reverse。
.flex-container {
flex-wrap: wrap;
}Flex Item 的属性
Flex Item 也有很多属性可以控制其自身在 Flex Container 中的布局方式。下面是一些常用的属性。
order
order 属性用来指定 Flex Item 的排列顺序。默认值是 0。可以设置为正整数或负整数。
.flex-item {
order: 1;
}flex-grow
flex-grow 属性用来指定 Flex Item 在剩余空间中的分配比例。默认值是 0。可以设置为正整数。
.flex-item {
flex-grow: 1;
}flex-shrink
flex-shrink 属性用来指定 Flex Item 在空间不足时的收缩比例。默认值是 1。可以设置为正整数。
.flex-item {
flex-shrink: 1;
}flex-basis
flex-basis 属性用来指定 Flex Item 的基准大小。默认值是 auto。可以设置为具体的长度值或百分比。
.flex-item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写。可以使用一个简单的语法来指定这三个属性。
.flex-item {
flex: 1 1 100px;
}align-self
align-self 属性用来指定单个 Flex Item 在交叉轴方向上的对齐方式。默认值是 auto。可以设置为 flex-start、flex-end、center、baseline 或 stretch。
.flex-item {
align-self: center;
}实践总结
在实践中，我们可以使用 Flexbox 来实现各种复杂的布局。下面是一些实例。
水平居中
<div class="flex-container"> <div class="flex-item">Flex Item 1</div> <div class="flex-item">Flex Item 2</div> <div class="flex-item">Flex Item 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- - ---------- - ------ ------ ------- ------ ----------------- ----- -
垂直居中
<div class="flex-container"> <div class="flex-item">Flex Item 1</div> <div class="flex-item">Flex Item 2</div> <div class="flex-item">Flex Item 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ------------ ------- - ---------- - ------ ------ ------- ------ ----------------- ----- -
水平垂直居中
<div class="flex-container"> <div class="flex-item">Flex Item 1</div> <div class="flex-item">Flex Item 2</div> <div class="flex-item">Flex Item 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- ------------ ------- - ---------- - ------ ------ ------- ------ ----------------- ----- -
等分布局
<div class="flex-container"> <div class="flex-item">Flex Item 1</div> <div class="flex-item">Flex Item 2</div> <div class="flex-item">Flex Item 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- - ---------- - ----- -- ------- ------ ----------------- ----- -
瀑布流布局
<div class="flex-container"> <div class="flex-item">Flex Item 1</div> <div class="flex-item">Flex Item 2</div> <div class="flex-item">Flex Item 3</div> <div class="flex-item">Flex Item 4</div> <div class="flex-item">Flex Item 5</div> <div class="flex-item">Flex Item 6</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- - ---------- - ----- - - ------ ------- ----- ------- ------ ----------------- ----- -
总结
Flexbox 是一种十分强大的布局方式，可以轻松地实现各种复杂的布局。在企业级应用中，它已经成为了一种必备的技术。在使用 Flexbox 时，我们需要了解一些基本概念和常用属性，并结合实践来掌握它的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ff3c20d10417a222a63033