CSS---Flex布局 - 技术栈

在网页设计中，布局是至关重要的一部分，而Flex布局（Flexible Box Layout）则提供了一种灵活而强大的方式来管理网页中的元素排列和对齐。本文将深入介绍Flex布局的原理、用法和实例，帮助你更好地掌握这一布局技术，创建出适应性强、可扩展性高的网页布局。

1. Flex布局简介

Flex 布局是一种基于弹性盒子模型的布局方式，它通过对容器和项目应用不同的属性和值来实现网页中元素的灵活排列和对齐。Flex布局允许我们在一个方向上（行或列）对元素进行自动调整，以适应不同屏幕尺寸和设备。

2. 相关概念

主轴（Main Axis）

主轴是 Flex 容器中项目排列的主要方向。在默认情况下，主轴是水平方向（从左到右），即 flex-direction: row;，但也可以通过设置 flex-direction 属性为 column 或者 row-reverse 等值来改变主轴的方向。
交叉轴（Cross Axis）

交叉轴是与主轴垂直的方向。在默认情况下，交叉轴是垂直方向（从上到下），但也可以通过设置 flex-direction 属性为 column 或者 column-reverse 等值来改变交叉轴的方向。

3. Flex容器属性

Flex容器是包含了Flex项目的父元素，通过设置Flex容器的属性，可以控制容器中项目的排列方式和样式。常用的Flex容器属性包括： display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

display：定义元素为Flex容器，取值为flex。开启flex布局，其子元素为Flex项目（item）

css 复制代码

.flex-container {
    display:flex
}

flex-direction：定义项目的排列方向（主轴方向），可选值有row、row-reverse、column、column-reverse。让我们来看看不同取值的效果：

row是默认值

row-reverse

column

column-reverse
flex-wrap：规定是否应该对 flex 项目换行。，可选值有nowrap、wrap、wrap-reverse。

nowrap是默认值,通过下图可以看出当一行中所有项目长度超过了容器的长度时，项目就会变形变窄适应容器的大小,

wrap每个项目元素的大小不变，沿交叉轴方向换行排序

wrap-reverse：和wrap类似，只不过是沿着交叉轴的反方向换行排序
flex-flow：属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
css 复制代码
```
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
```
justify-content：定义项目在主轴上的对齐方式，可选值有flex-start、flex-end、center、space-between、space-around、space-evenly

flex-start 值将 flex 项目在容器的开头对齐（默认）：

flex-end 值将 flex 项目在容器的末端对齐：

center 值将 flex 项目在容器的中心对齐：

space-between 值显示行之间有空格的 flex 项目：

space-around 值显示行之前、之间和之后带有空格的 flex 项目，注意和space-evenly的区别： space-evenly 项目元素间隔相等，注意和space-around的区别：
align-items：定义项目在交叉轴上的对齐方式，可选值有flex-start、flex-end、center、baseline、stretch。在下面例子中我们给容器一个高度，项目元素不给高度，则项目元素的高度应为元素内容撑开的高度

flex-start值将 flex 项目在容器顶部对齐：

flex-end值将弹性项目在容器底部对齐：

center值将 flex 项目在容器中间对齐：

baseline值使 flex 项目基线对齐：

stretch值拉伸 flex 项目以填充容器（默认）：
align-content：定义多行项目时，多个主轴对齐方式，可选值有flex-start、flex-end、center、space-between、space-around、stretch。在下面例子中，我们使用 600 像素高的容器，并将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。

flex-start值在容器开头显示弹性线：

flex-end值在容器的末尾显示弹性线：

center值在容器中间显示弹性线：

space-between值显示的弹性线之间有相等的间距：

space-around值显示弹性线在其之前、之间和之后带有空格：

stretch值拉伸弹性线以占据剩余空间（默认）：

4. Flex项目属性详解

Flex 项目是 Flex 容器中的子元素，我们可以通过设置项目的属性来控制其大小、顺序和对齐方式。下面是一些常用的 Flex 项目属性：flex-grow、 flex-shrink、flex-basis、flex、order、align-self。

flex-grow：决定了项目在 Flex 容器中分配剩余空间的比例。如果所有项目的 flex-grow 值都为 1，它们将等分剩余空间；如果其中一个项目的 flex-grow 值为 2，另一个为 1，前者将获得的空间是后者的两倍。默认为0。下图中，7设置的2,8设置的1，所有7是8的两倍
flex-shrink：定义项目的缩小比例，默认为 1，即按比例缩小。
flex-basis：定义项目的初始大小，默认为 auto，即由内容决定。
flex：同时设置 flex-grow、flex-shrink 和 flex-basis。
order：定义项目的排列顺序，数值越小越靠前，默认是0。通过设置数值大小可以实现下面的排序效果：
align-self：定义项目在交叉轴上的对齐方式，可覆盖容器的 align-items 属性。可以理解为单独定义此项目元素的交叉轴对齐方式，属性值同align-items

5. 总结

Flex 布局是一种强大而灵活的网页布局技术，它为我们提供了一种简单而直观的方式来布局网页中的元素。通过合理使用 Flex 容器属性和 Flex 项目属性，我们可以轻松创建出适应性强、可维护性高的网页布局，从而提升用户体验和页面效果。希望本文能够帮助你更好地理解和运用 Flex 布局，在网页设计中发挥更大的创造力和想象力。