css-flex布局

CSS Flexbox布局是一种现代化的布局方式，可以简化复杂的布局，并在不同尺寸的屏幕上提供灵活性。

以下是一些CSS Flex布局的常用样式和属性：

1. display: flex; 这个属性将元素设置为一个flex容器。
2. flex-direction: row | row-reverse | column | column-reverse; 这个属性定义了flex项在容器中的方向。
3. flex-wrap: nowrap | wrap | wrap-reverse; 这个属性定义了flex项在一条线上无法放下时，应该如何换行。
4. justify-content: flex-start | flex-end | center | space-between | space-around; 这个属性定义了flex项在主轴方向上的对齐方式。
5. align-items: flex-start | flex-end | center | baseline | stretch; 这个属性定义了flex项在交叉轴方向上的对齐方式。
6. align-self: auto | flex-start | flex-end | center | baseline | stretch; 这个属性定义了单个flex项在交叉轴方向上的对齐方式。
7. flex-grow: <number>; 这个属性定义了flex项在可用空间中的放大比例。
8. flex-shrink: <number>; 这个属性定义了flex项在空间不足时的缩小比例。
9. flex-basis: <length> | auto; 这个属性定义了在分配多余空间之前，flex项占据的主轴空间。
10. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 这个属性是flex-grow, flex-shrink和flex-basis的简写。

以下是一个简单的flex布局的例子：

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
 
.item {
  margin: 5px;
  padding: 10px;
  color: white;
  background-color: dodgerblue;
  flex: 1;
}

这个例子中，.container是一个flex容器，.item是容器中的flex项。这个容器将项居中对齐，并在必要时换行。每个项目都会占据等量的空间，因为flex属性被设置为1。