css中的flex布局

Flex布局是CSS的一个重点应用。它可以简便、完整、响应式地实现各种页面布局。Flex布局的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。

CSS Flex布局是一种非常强大的布局模式，它可以让网页的元素在容器中自动排列、对齐和分布，Flex布局的主要目的是让开发者能够更轻松地创建灵活的布局，而无需使用复杂的定位技巧，本文将详细介绍CSS Flex布局的属性，帮助你更好地理解和应用这一技术。

主轴(Main Axis)

1、方向(direction):定义主轴的方向，可选值为row(水平)或column(垂直)，默认值为row。

.container {
  display: flex;
  direction: row; /* 或者 'column' */
}

2、项目排列(flex-direction):定义项目在主轴上的排列方式，可选值为row(默认，水平排列)或column(垂直排列)。

.container {
  display: flex;
  flex-direction: row; /* 或者 'column' */
}

3、项目伸缩性(flex-grow):定义项目的伸展能力，即在主轴方向上占据的空间比例，默认值为0,表示项目不会伸展。

.item {
  flex-grow: 1; /* 如果需要所有项目平均分配空间 */
}

4、项目收缩性(flex-shrink):定义项目的缩小能力，即在主轴方向上缩小的空间比例，默认值为1,表示项目不会缩小。

.item {
  flex-shrink: 1; /* 如果需要所有项目平均分配空间 */
}

5、项目轴对齐(justify-content):定义项目在主轴上的对齐方式，可选值为flex-start(起点对齐)、flex-end(终点对齐)、center(居中对齐)、space-between(两端对齐，项目之间平均分配空间)或space-around(每个项目两侧平均分配空间)。

.container {
  display: flex;
  justify-content: center; /* 或者 'flex-start', 'flex-end', 'space-between', 'space-around' */
}

交叉轴(Cross Axis)

1、对齐方式(align-items):定义项目在交叉轴上的对齐方式，可选值为stretch(拉伸以填充容器高度)、flex-start(起点对齐)、flex-end(终点对齐)、center(居中对齐)或baseline(基线对齐)，默认值为stretch,表示项目会拉伸以填充容器高度。

.container {
  display: flex;
  align-items: center; /* 或者 'stretch', 'flex-start', 'flex-end', 'baseline' */
}

2、对齐位置(align-self):定义单个项目的对齐方式，与align-items类似，但可以针对单个项目进行设置，可选值同上。

.item {
  align-self: auto; /* 或者 'stretch', 'flex-start', 'flex-end', 'baseline' */
}

其他属性

1、order:定义项目的显示顺序，数值越小，显示越靠前，默认值为0。

.item {
  order: 2; /* 将此项目的显示顺序设置为2 */
}

2、flex-wrap:定义是否换行，可选值为nowrap(不换行)、wrap(换行)或wrap-reverse(反向换行)，默认值为nowrap,表示不换行。