前言
在前端开发中，布局是一个不可避免的问题，而 CSS Flexbox 布局则是解决布局问题的理想方案之一。Flexbox 布局不仅可以快速的实现网页布局，还可以轻松应对移动端的自适应布局需求。而其中 flex-grow 属性是实现灵活性的关键所在。本文将详细介绍 CSS Flexbox 布局以及如何玩转 flex-grow。
什么是 CSS Flexbox 布局？
CSS Flexible Box Layout，简称 Flexbox 布局，是 CSS3 新增的一种布局方式，它可以快速的完成网页的布局，并且能够适应各种设备的屏幕。Flexbox 布局中，主轴和交叉轴是灵活的，因此可以根据需要自由的调整布局方向与流向，实现多样化的排版方式。
如何使用 CSS Flexbox 布局？
要使用 Flexbox 布局，需要以下两个步骤：
1. 父容器设置 display: flex;
要定义一个拥有 Flexbox 能力的父容器元素，需要设置它的 display 属性为 flex 或 inline-flex，来使它成为一个 Flexbox 容器，这样它的所有直接子元素都可以成为 Flexbox 项。
.container {
display: flex;
}2. 子容器设置 flex 属性
父容器设置为 Flexbox 之后，需要针对子元素的布局进行设置。使用 Flexbox 布局，可以通过下面的属性来控制父元素内部的子元素的排列方式：
- flex-direction 控制主轴方向。
- justify-content 控制主轴子元素的排列方式。
- align-items 控制交叉轴的子元素的排列方式。
- align-content 在交叉轴上控制多行子元素的排列方式。
具体属性的语法和用法，请参考官方文档。
Flexbox 布局中，我们常常使用 flex-grow 属性来控制子元素的边距和大小。以下将会详细介绍该属性的使用方法和效果。
flex-grow 属性详解
什么是 flex-grow 属性？
flex-grow 属性定义了各个子元素之间的增长系数，即定义了子元素占据剩余空间的比例。默认值为 0，表示不占用剩余空间，子元素大小根据设置的大小进行分配；若设置为 1，则表示所有子元素占用剩余空间的比例相同，基于子元素已有的宽度分配。
在实际布局中，我们通常使用 flex-grow 属性来实现子元素的自适应布局，这种布局方式在响应式设计中尤为有用。
如何使用 flex-grow 属性？
以下是使用 flex-grow 属性来实现自适应布局的一个简单示例，代码如下：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.container {
display: flex;
}
.item {
flex-grow: 1;
}以上代码中，通过将 .container 设置为 Flexbox 容器，将容器中的三个 .item 设置为 Flexbox 项。而在 .item 中，我们使用 flex-grow: 1 将各个子元素控制为等宽度的布局，即三个子元素等宽布局，如下图所示：
在实际布局中，我们通常结合其他属性一起使用，来实现更加复杂的自适应布局。
总结
CSS Flexbox 布局是一种灵活的网页布局方式，通过设置 display: flex; 将容器设置为 Flexbox 容器，通过子元素的属性来控制布局。在实际使用中，可结合 flex-grow 属性，灵活控制子元素的增长系数，实现自适应布局。对于移动端自适应布局等场景，使用 Flexbox 布局能够快速的解决布局问题，提高开发效率，是前端工程师必学的技能之一。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ab6ec0add4f0e0ff514bcb