5.1 Flexbox的基本概念
Flexbox (Flexible Box Layout) 是一个强大的CSS布局系统，它提供了一种灵活而高效的方法来分配空间和对齐容器内的元素。Flexbox对创建复杂布局和响应式设计特别有用。现在我们来看看Flexbox的基础知识，包括创建Flex容器和元素，以及使用 display: flex; 属性。
Flexbox的基本概念
Flexbox由两个关键组件组成：
- Flex容器：包含Flex元素的父元素。
- Flex元素：在Flex容器内，根据Flexbox规则进行对齐和分布的子元素。
Flex容器
使用 display: flex; 或 display: inline-flex; 属性创建Flex容器。Flex容器管理其子元素（Flex元素）的布局，并提供多种对齐和分布的可能性。
CSS
.container {
display: flex; /* 或者 inline-flex */
}
使用示例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
代码解释：
-
.container：用display: flex;创建的Flex容器。在这个容器内，元素根据Flexbox规则进行对齐和分布。 .item：Flex元素，是Flex容器的子元素。
5.2 Flex容器的属性
display: flex; 属性将元素定义为Flex容器。这个容器的子元素自动成为Flex元素，并开始遵循Flexbox规则。
display: flex;
创建一个块状Flex容器。Flex容器的表现类似于一个块级元素，占据父元素的全部可用宽度。
CSS
.container {
display: flex;
}
display: inline-flex;
创建一个行内Flex容器。Flex容器的表现类似于一个行内元素，仅占据必要的宽度，可以与其他行内元素并排放置。
CSS
.inline-container {
display: inline-flex;
}
使用示例：
CSS
.inline-container {
display: inline-flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
HTML
<div class="inline-container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
<div class="inline-container">
<div class="item">元素 4</div>
<div class="item">元素 5</div>
</div>
代码解释：
inline-container是用display: inline-flex;创建的Flex容器。在这个容器内，元素根据Flexbox规则进行对齐和分布。容器表现为行内元素，并排放置。
5.3 Flex元素的属性
1. flex 属性是设置 flex-grow, flex-shrink 和 flex-basis 的缩写。它允许管理Flex元素的伸展和收缩，以填充可用空间。
语法：
.element {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
使用示例：
CSS
.item {
flex: 1;
}
2. 属性 order
属性 order 定义Flex元素在Flex容器内的排列顺序。默认情况下，所有元素的值为 order: 0;。
值
整数。值较小的元素会排在值较大的元素前面。
语法：
.element {
order: value;
}
使用示例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item-1 {
order: 2;
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.item-2 {
order: 1;
background-color: #2ecc71;
color: white;
padding: 10px;
margin: 5px;
}
.item-3 {
order: 3;
background-color: #e74c3c;
color: white;
padding: 10px;
margin: 5px;
}
HTML
<div class="container">
<div class="item-1">元素 1</div>
<div class="item-2">元素 2</div>
<div class="item-3">元素 3</div>
</div>
代码解释：
.item-1：值为order: 2，所以会排在order: 1的元素之后。.item-2：值为order: 1，所以会排在第一个。.item-3：值为order: 3，所以会排在最后。
GO TO FULL VERSION