CSS 笔记 - 第6天

flex主轴与侧轴对齐方式

在Flex布局中，容器内的项目沿着两个轴进行排列：主轴（Main Axis）和侧轴（Cross Axis）。默认情况下，主轴是水平方向，侧轴是垂直方向。

用于设置项目在主轴上的对齐方式，属性值包括：

.container {
  display: flex;
  justify-content: center; /* 在主轴上居中对齐 */
}

用于设置项目在侧轴上的对齐方式，属性值包括：

.container {
  display: flex;
  align-items: center; /* 在侧轴上居中对齐 */
}

允许单个项目有不同于其他项目的对齐方式，可覆盖align-items属性：

1
2
3

.item {
  align-self: flex-end; /* 该项目在侧轴上靠终点对齐 */
}

通过flex-direction属性可以更改主轴的方向，从而改变项目的排列方向。

.container {
  display: flex;
  flex-direction: column; /* 主轴变为垂直方向 */
}

修改主轴方向后，主轴和侧轴的概念会相应变化，但各种对齐属性的作用依然是针对主轴和侧轴，而不是水平和垂直方向。

Flex布局允许子项目按照一定的比例分配容器的剩余空间，这通过flex属性来实现。

flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

1
2
3

.item {
  flex-grow: 1; /* 平均分配剩余空间 */
}

如果所有项目的flex-grow都为1，则它们将等分剩余空间。如果有一个项目的flex-grow为2，其他项目都为1，则前者占据的剩余空间将是其他项的两倍。

定义项目的缩小比例，默认为1，即如果空间不足，该项目会缩小。

1
2
3

.item {
  flex-shrink: 0; /* 空间不足时不缩小 */
}

定义在分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目的本来大小。

1
2
3

.item {
  flex-basis: 200px; /* 项目基础尺寸为200px */
}

默认情况下，所有Flex项目都排在一条线（主轴）上。flex-wrap属性可以使项目在必要时换行。

.container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
}

当存在多行时，通过align-content属性可以定义多行在侧轴上如何对齐，类似于主轴上的justify-content：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* 多行在侧轴上两端对齐 */
}

flex-flow是flex-direction和flex-wrap的简写形式：

.container {
  display: flex;
  flex-flow: row wrap; /* 水平方向并且允许换行 */
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.navbar {
  display: flex;
  justify-content: space-between;
}

.nav-left {
  display: flex;
}

.nav-right {
  display: flex;
}

.responsive-container {
  display: flex;
  flex-wrap: wrap;
}

.responsive-item {
  flex: 1 1 300px; /* 基础宽度300px，但可以伸缩 */
  margin: 10px;
}

Flex布局是一种强大的CSS布局方式，通过主轴、侧轴的概念和一系列属性，可以轻松实现各种布局效果：

掌握Flex布局是现代前端开发的基本要求，能够帮助我们更轻松地实现复杂的页面布局。