css3弹性布局 - 技术栈

CSS3的弹性布局（Flexbox）是一种强大的布局模式，用于创建灵活且响应式的布局结构。它使得容器内的项目能够更智能地分配空间，并且可以轻松调整它们的对齐方式。下面是一些关键概念和示例代码来帮助你更好地理解和使用Flexbox。

基础设置

首先，定义一个Flex容器和几个项目。我们从最简单的布局开始：

css深色版本

.container {
  display: flex; /* 启用Flex布局 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 5px;
}

在这个例子中，.container是一个Flex容器，而.item是它的子元素（即Flex项目）。默认情况下，所有的项目会沿着主轴（水平方向）排列，并且尽可能地靠近容器的起始位置。

主要属性详解

Flex容器属性

flex-direction ：控制主轴的方向。
- row (默认)：从左到右排列。
- row-reverse：从右到左排列。
- column：从上到下排列。
- column-reverse：从下到上排列。
justify-content ：控制主轴上的对齐方式。
- flex-start (默认)：项目在主轴的起始位置对齐。
- center：项目在主轴居中对齐。
- flex-end：项目在主轴的结束位置对齐。
- space-between：项目之间有等间距，第一个项目在起始位置，最后一个项目在结束位置。
- space-around：项目周围有等间距。
- space-evenly：项目之间及与边界的间距相等。
align-items ：控制交叉轴上的对齐方式。
- stretch (默认)：如果项目未设置高度或宽度，它将被拉伸以填充容器。
- center：项目在交叉轴居中对齐。
- flex-start：项目在交叉轴的起始位置对齐。
- flex-end：项目在交叉轴的结束位置对齐。
- baseline：项目基线对齐。
flex-wrap ：控制项目是否可以换行。
- nowrap (默认)：不换行。
- wrap：允许换行。
- wrap-reverse：允许换行，但第一行出现在容器的底部。
gap ：设置项目之间的间距。
- gap: 10px; 或者 row-gap: 10px; column-gap: 10px;
align-content ：当有多行时，控制多行在交叉轴上的对齐方式。
- stretch (默认)：每行占据相同的高度。
- center：所有行在交叉轴居中对齐。
- flex-start：所有行在交叉轴的起始位置对齐。
- flex-end：所有行在交叉轴的结束位置对齐。
- space-between：行之间有等间距。
- space-around：行周围有等间距。

Flex项目属性

order ：定义项目的排列顺序。
- order: 1; 数值越小，排列越靠前。
flex-grow ：定义项目的放大比例。
- flex-grow: 1; 如果存在剩余空间，项目将会放大。
flex-shrink ：定义项目的缩小比例。
- flex-shrink: 1; 如果空间不足，项目将会缩小。
flex-basis ：定义在分配多余空间之前，项目占据的主轴空间。
- flex-basis: auto; 默认值，根据内容自动调整。
- flex-basis: 200px; 固定宽度。
flex ：是flex-grow, flex-shrink 和 flex-basis 的简写。
- flex: 1 1 auto; 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: auto;
- flex: 0 0 200px; 不放大也不缩小，固定宽度为200px。
align-self ：允许单个项目有自己的对齐方式，可以覆盖align-items属性。
- align-self: center; 项目在交叉轴居中对齐。

示例代码

水平居中对齐

css深色版本

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 设置容器高度 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

多行布局

css深色版本

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 项目间间距 */
}

.item {
  flex: 1 1 calc(33.333% - 20px); /* 每个项目占三分之一宽度减去间距 */
  height: 100px;
  background-color: lightgreen;
}

控制项目顺序

css深色版本

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 5px;
}

.item:nth-child(2) {
  order: -1; /* 将第二个项目移到最前面 */
}

通过这些基本的概念和例子，你应该能够更好地理解和应用Flexbox来创建复杂的响应式布局。记得在实际项目中不断实验不同的配置，找到最适合你设计需求的方法。