在html" title=前端>前端开发中，布局是一个非常重要的环节。传统的布局方式（如浮动、定位）在应对复杂布局时往往显得笨拙。而 CSS Flexbox（弹性盒子）布局模型的引入，使得布局变得更加简单和直观。
1. 什么是 Flex 布局？
Flexbox，全称为 Flexible Box，是 CSS3 中的一种布局模型，旨在为容器中的子元素提供更有效的排列方式。与传统布局不同，Flexbox 布局不依赖于块或内联布局，而是基于“容器-项目”的关系进行布局控制。
2. 基本概念
在 Flex 布局中，主要涉及两个概念：容器 和 项目。
- 容器（Flex Container）：通过设置
display: flex或display: inline-flex来定义。容器内部的所有子元素（即项目）都会自动成为弹性盒模型的项目。 - 项目（Flex Item）：容器中的每个子元素称为项目，它们将按照 Flex 布局规则排列。
3. Flex 容器的属性
容器上定义的属性决定了其子项目的排列方式。主要的容器属性包括：
3.1 flex-direction
该属性决定主轴的方向（即项目的排列方向）。默认值为 row。
row：项目按行排列（从左到右）。row-reverse：项目按行反向排列（从右到左）。column：项目按列排列（从上到下）。column-reverse：项目按列反向排列（从下到上）。
html" title=css>css">.container {display: flex;flex-direction: row;
}
3.2 justify-content
该属性定义了项目在主轴上的对齐方式。
flex-start：左对齐（默认）。flex-end：右对齐。center：居中对齐。space-between：两端对齐，项目之间的间隔相等。space-around：每个项目两侧的间隔相等。
html" title=css>css">.container {display: flex;justify-content: space-between;
}
3.3 align-items
该属性定义了项目在交叉轴上的对齐方式。
stretch：项目拉伸以适应容器（默认）。flex-start：项目与交叉轴的起点对齐。flex-end：项目与交叉轴的终点对齐。center：项目在交叉轴上居中对齐。baseline：项目的第一行文字基线对齐。
html" title=css>css">.container {display: flex;align-items: center;
}
3.4 flex-wrap
该属性决定了当一行项目过多时，是否换行显示。
nowrap：不换行（默认）。wrap：换行，项目在新行上排列。wrap-reverse：换行，项目在新行上反向排列。
html" title=css>css">.container {display: flex;flex-wrap: wrap;
}
4. Flex 项目的属性
项目也可以通过一些属性来控制它们在容器中的行为。
4.1 flex-grow
该属性定义了项目的增长系数，即当容器有剩余空间时，项目如何分配这些空间。默认值为 0，即不增长。
html" title=css>css">.item {flex-grow: 1;
}
4.2 flex-shrink
该属性定义了项目的收缩系数，即当容器空间不足时，项目如何缩小。默认值为 1，允许收缩。
html" title=css>css">.item {flex-shrink: 1;
}
4.3 flex-basis
该属性定义了在分配多余空间之前，项目的初始大小。可以设置为具体的像素值或百分比，或者使用 auto（默认）。
html" title=css>css">.item {flex-basis: 200px;
}
4.4 align-self
该属性允许单个项目有与其他项目不同的对齐方式，覆盖 align-items 属性。
html" title=css>css">.item {align-self: flex-end;
}
5. 实际案例
假设我们有一个网页布局，包含一个导航栏、内容区和侧边栏。我们可以使用 Flex 布局轻松实现。
html"><div class="container"><nav class="nav">Navigation</nav><main class="content">Main Content</main><aside class="sidebar">Sidebar</aside>
</div>
html" title=css>css">.container {display: flex;flex-direction: row;justify-content: space-between;align-items: stretch;
}.nav {flex-basis: 20%;
}.content {flex-grow: 2;flex-basis: 60%;
}.sidebar {flex-basis: 20%;
}
在这个示例中，我们利用 Flex 布局使导航栏和侧边栏占据固定宽度，而内容区则根据可用空间自动调整大小。
6. 总结
CSS Flex 布局是一个功能强大且灵活的工具，能够简化复杂的布局任务。通过理解和掌握 Flex 容器和项目的属性，你可以轻松地创建响应式和自适应的网页布局。
