Flex元素自适应布局，轻松掌握flex常用属性

前端

2023-09-30 03:35:58

Flex布局（Flexible Box Layout Module），又称弹性盒布局，是CSS中用于创建自适应布局的强大工具。通过使用flex布局，您可以轻松创建出响应式网页，并在不同的设备上实现最佳的显示效果。

flex元素

Flex布局中的元素被称为flex元素。每个flex元素都具有以下属性：

flex-grow：控制元素在主轴上的增长比例。默认值为0，表示元素不会增长。
flex-shrink：控制元素在主轴上的收缩比例。默认值为1，表示元素会均匀收缩。
flex-basis：控制元素在主轴上的初始大小。默认值为auto，表示元素的初始大小由其内容决定。

flex容器

Flex元素被放置在flex容器中。flex容器是负责管理flex元素布局的元素。flex容器具有以下属性：

flex-direction：控制flex元素在主轴上的排列方向。默认值为row，表示元素在水平方向上排列。
flex-wrap：控制flex元素在主轴上的换行方式。默认值为nowrap，表示元素不会换行。
justify-content：控制flex元素在主轴上的对齐方式。默认值为flex-start，表示元素在主轴的起始位置对齐。
align-items：控制flex元素在侧轴上的对齐方式。默认值为stretch，表示元素在侧轴上拉伸以填满整个容器。
align-content：控制flex元素在侧轴上的对齐方式。默认值为stretch，表示元素在侧轴上拉伸以填满整个容器。

flex属性

flex属性用于控制flex元素在flex容器中的行为。flex属性包括：

flex：是一个简写属性，用于同时设置flex-grow、flex-shrink和flex-basis属性。
flex-grow：控制元素在主轴上的增长比例。默认值为0，表示元素不会增长。
flex-shrink：控制元素在主轴上的收缩比例。默认值为1，表示元素会均匀收缩。
flex-basis：控制元素在主轴上的初始大小。默认值为auto，表示元素的初始大小由其内容决定。

flex布局示例

<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;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

上面的代码将创建一个flex容器，其中包含三个flex元素。flex容器的flex-direction属性设置为row，表示flex元素将在水平方向上排列。flex-wrap属性设置为wrap，表示flex元素将在需要时换行。justify-content属性设置为center，表示flex元素将在flex容器的主轴上居中对齐。align-items属性设置为center，表示flex元素将在flex容器的侧轴上居中对齐。align-content属性设置为center，表示flex元素将在flex容器的侧轴上居中对齐。

flex元素的flex属性设置为1，表示flex元素将在flex容器的主轴上均匀增长和收缩。flex-basis属性设置为100px，表示flex元素的初始大小为100px。margin属性、padding属性和border属性用于设置flex元素的边距、内边距和边框。text-align属性用于设置flex元素的文本对齐方式。