知晓弹性布局Flex，网站布局实现不再头秃

2023-11-05 21:55:54

CSS弹性布局是什么？

CSS 弹性布局（Flexible Box Layout Module）是一种新的 CSS 布局模式，它允许您灵活地布局元素，而不用担心元素的顺序或尺寸。使用弹性布局，您可以轻松地创建灵活的、响应式布局，这种布局在不同设备上都能很好地表现。

弹性布局的基本概念

弹性布局的主要概念是弹性容器和弹性项目。弹性容器是一个包含弹性项目的元素，而弹性项目是弹性容器内的元素。弹性容器通常使用display: flex属性来声明，而弹性项目使用flex属性来声明。

弹性布局的属性

弹性布局具有多种属性，这些属性可以用来控制弹性容器和弹性项目的行为。下面列出了一些最重要的弹性布局属性：

flex-direction：此属性指定弹性容器中弹性项目的排列方向。可以设置为row（水平排列）、column（垂直排列）、row-reverse（反向水平排列）或column-reverse（反向垂直排列）。
flex-wrap：此属性指定当弹性项目超出弹性容器时是否换行。可以设置为nowrap（不换行）、wrap（换行）或wrap-reverse（反向换行）。
flex-flow：此属性是flex-direction和flex-wrap的简写属性。
justify-content：此属性指定弹性项目在弹性容器中的水平对齐方式。可以设置为flex-start（左对齐）、center（居中对齐）、flex-end（右对齐）、space-between（项目之间均匀分布）或space-around（项目周围均匀分布）。
align-items：此属性指定弹性项目在弹性容器中的垂直对齐方式。可以设置为flex-start（顶部对齐）、center（居中对齐）、flex-end（底部对齐）、stretch（项目拉伸以填满整个弹性容器）或baseline（项目根据基线对齐）。
align-content：此属性指定弹性容器中多行弹性项目的垂直对齐方式。可以设置为flex-start（顶部对齐）、center（居中对齐）、flex-end（底部对齐）、space-between（项目之间均匀分布）或space-around（项目周围均匀分布）。

弹性布局的实例

下面是一个使用弹性布局创建的简单布局的示例：

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

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: red;
}