深入明白 CSS Flex 布局

在前端开辟中，布局是一个非常告急的环节。传统的布局方式（如浮动、定位）在应对复杂布局时每每显得鸠拙。而 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：项目按列反向分列（从下到上）。
  

1. .container {
2.   display: flex;
3.   flex-direction: row;
4. }

复制代码

3.2 justify-content

该属性界说了项目在主轴上的对齐方式。

• flex-start：左对齐（默认）。
  
• flex-end：右对齐。
  
• center：居中对齐。
  
• space-between：两端对齐，项目之间的隔断相当。
  
• space-around：每个项目两侧的隔断相当。
  

1. .container {
2.   display: flex;
3.   justify-content: space-between;
4. }

复制代码

3.3 align-items

该属性界说了项目在交织轴上的对齐方式。

• stretch：项目拉伸以顺应容器（默认）。
  
• flex-start：项目与交织轴的出发点对齐。
  
• flex-end：项目与交织轴的尽头对齐。
  
• center：项目在交织轴上居中对齐。
  
• baseline：项目标第一行笔墨基线对齐。
  

1. .container {
2.   display: flex;
3.   align-items: center;
4. }

复制代码

3.4 flex-wrap

该属性决定了当一行项目过多时，是否换行体现。

• nowrap：不换行（默认）。
  
• wrap：换行，项目在新行上分列。
  
• wrap-reverse：换行，项目在新行上反向分列。
  

1. .container {
2.   display: flex;
3.   flex-wrap: wrap;
4. }

复制代码

4. Flex 项目标属性

项目也可以通过一些属性来控制它们在容器中的举动。
4.1 flex-grow

该属性界说了项目标增长系数，即当容器有剩余空间时，项目怎样分配这些空间。默认值为 0，即不增长。

1. .item {
2.   flex-grow: 1;
3. }

复制代码

4.2 flex-shrink

该属性界说了项目标紧缩系数，即当容器空间不敷时，项目怎样缩小。默认值为 1，答应紧缩。

1. .item {
2.   flex-shrink: 1;
3. }

复制代码

4.3 flex-basis

该属性界说了在分配多余空间之前，项目标初始巨细。可以设置为具体的像素值或百分比，大概使用 auto（默认）。

1. .item {
2.   flex-basis: 200px;
3. }

复制代码

4.4 align-self

该属性答应单个项目有与其他项目差别的对齐方式，覆盖 align-items 属性。

1. .item {
2.   align-self: flex-end;
3. }

复制代码

5. 实际案例

假设我们有一个网页布局，包罗一个导航栏、内容区和侧边栏。我们可以使用 Flex 布局轻松实现。

1. <div class="container">
2.   <nav class="nav">Navigation</nav>
3.   <main class="content">Main Content</main>
4.   <aside class="sidebar">Sidebar</aside>
5. </div>

复制代码

1. .container {
2.   display: flex;
3.   flex-direction: row;
4.   justify-content: space-between;
5.   align-items: stretch;
6. }
8. .nav {
9.   flex-basis: 20%;
10. }
12. .content {
13.   flex-grow: 2;
14.   flex-basis: 60%;
15. }
17. .sidebar {
18.   flex-basis: 20%;
19. }

复制代码

在这个示例中，我们使用 Flex 布局使导航栏和侧边栏占据固定宽度，而内容区则根据可用空间自动调解巨细。
6. 总结

CSS Flex 布局是一个功能强大且机动的工具，可以大概简化复杂的布局使命。通过明白和把握 Flex 容器和项目标属性，你可以轻松地创建相应式和自顺应的网页布局。