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,表示不换行。