前言
在前端开发中，布局是一个非常重要的部分。而 Flex 布局则是一种非常方便且实用的布局方式，特别是在移动端开发中更是如此。Flex 布局提供了一些非常重要的属性，其中最重要的就是 flex 属性。在本文中，我们将会深入地理解 Flex 的 flex 属性，并通过示例代码来演示如何使用。
Flex 布局简介
Flex 布局是一种弹性盒子布局，可以方便地实现各种复杂的布局效果。它的主要特点包括：
- 父元素和子元素都可以设置为 Flex 布局。
- 父元素的子元素会按照一定的规则排列。
- 子元素可以自适应宽度或高度，也可以固定宽度或高度。
Flex 布局的 flex 属性
Flex 布局提供了很多属性，其中最重要的就是 flex 属性。flex 属性用来设置子元素的宽度或高度，它有三个值：flex-grow、flex-shrink 和 flex-basis。
flex-grow
flex-grow 属性用来设置子元素在剩余空间中的放大比例。它的默认值为 0，表示子元素不会自动放大。当 flex-grow 的值为 1 时，子元素会将剩余空间等分，如果有两个子元素的 flex-grow 值都为 1，它们将会平分剩余空间。
flex-shrink
flex-shrink 属性用来设置子元素在空间不足时的缩小比例。它的默认值为 1，表示子元素会自动缩小以适应空间。当 flex-shrink 的值为 0 时，子元素不会自动缩小。
flex-basis
flex-basis 属性用来设置子元素的基本宽度或高度。它的默认值为 auto，表示子元素的宽度或高度由内容决定。当 flex-basis 的值为一个具体的长度时，子元素的宽度或高度将会固定为这个长度。
使用示例
下面是一个简单的示例代码，它展示了如何使用 flex 属性来设置子元素的宽度或高度：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex 布局示例</title>
<style>
.container {
display: flex;
flex-direction: row;
height: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
flex: 1 1 auto;
background-color: #ccc;
margin-right: 10px;
text-align: center;
line-height: 200px;
font-size: 20px;
}
.item:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>在上面的示例代码中，我们使用了 flex 属性来设置子元素的宽度。具体来说，我们将 flex 属性设置为 1 1 auto，表示子元素会自动放大和缩小以适应空间，并且它的基本宽度由内容决定。这样，当父元素的宽度发生变化时，子元素的宽度也会自动调整，从而实现了自适应的效果。
总结
Flex 布局是一种非常实用的布局方式，它提供了很多属性来帮助我们实现各种复杂的布局效果。其中，flex 属性是最重要的一个属性，它用来设置子元素的宽度或高度。通过本文的介绍，相信大家已经对 Flex 布局的 flex 属性有了更深入的理解，并可以在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506ce7395b1f8cacd277d0a