display: flex布局

display: flex; 是一个 CSS 属性，用于设置元素的布局模式。该属性可以将一个元素的子元素排列为一条线，并通过一些属性来指定排列方向、对齐方式、间距等。

具体地说，使用 display: flex; 可以让一个元素成为 flex 容器，它的子元素就会成为 flex 项，参与到 flex 布局中。

例如，考虑以下 HTML 结构：

html
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
如果我们在 .container 上添加样式 display: flex;，那么三个子元素都会被排列为一条线。此时，我们可以使用 justify-content 和 align-items 等属性来分别设置水平和垂直方向上的对齐方式。

例如，我们可以使用以下样式将子元素在水平方向居中，垂直方向顶部对齐：

css
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直顶部对齐 */
}

flex 0 0 25%是什么意思？

flex 0 0 25% 是 CSS Flexbox 布局中的一个属性值，用于控制弹性盒子的伸缩性和尺寸。

flex 0 0 25% 表示弹性盒子在主轴方向上不伸展、不收缩，且初始宽度占据其父元素主轴方向可用空间的 25%。

flex: 25% 与 flex: 0 0 25% 的不同之处在于: flex: 25% 允许元素在必要时伸展或收缩，而 flex: 0 0 25% 则禁止伸展和收缩。