526互联

display: flex布局

发布时间 2023-04-05 14:57:53作者: 高柴小生

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; /* 垂直顶部对齐 */
}