Flex布局（Flexible Box Layout，简称Flexbox）是CSS3中用来布局的一种新方法，它通过指定容器和子项的属性，可以灵活地控制子项在容器中的排列方式。Flex布局的核心思想是将容器分成弹性容器（flex container）和弹性项目（flex items），并通过不同的属性来控制它们的对齐、排列和伸缩。
1. 基本概念
- Flex容器：包含flex子项的父容器。通过将容器的
display属性设置为flex或inline-flex，就可以将该容器定义为flex容器。 - Flex项目：直接包含在flex容器内的子元素，它们将会被自动调整以适应容器的布局。
2. 常用属性
容器属性
-
display: flex：将元素设置为flex容器。 -
flex-direction：定义主轴的方向（子项的排列方向）。row（默认）：主轴为水平方向，子项从左到右排列。row-reverse：主轴为水平方向，子项从右到左排列。column：主轴为垂直方向，子项从上到下排列。column-reverse：主轴为垂直方向，子项从下到上排列。
-
justify-content：定义子项在主轴上的对齐方式。flex-start（默认）：子项从主轴的起点开始。flex-end：子项从主轴的终点开始。center：子项在主轴上居中。space-between：子项之间的间距相等，且两端没有间距。space-around：子项之间的间距相等，且两端的间距为子项间距的一半。
-
align-items：定义子项在交叉轴上的对齐方式。stretch（默认）：子项拉伸以适应容器（如果未设置高度）。flex-start：子项在交叉轴的起点对齐。flex-end：子项在交叉轴的终点对齐。center：子项在交叉轴上居中。baseline：子项的基线对齐。
-
flex-wrap：定义子项是否换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
子项属性
order：定义子项的排列顺序，数值越小，排列越靠前，默认值为0。flex-grow：定义子项的放大比例，默认为0（即不放大）。flex-shrink：定义子项的缩小比例，默认为1（即可以缩小）。flex-basis：定义子项的初始大小，可以是绝对值（如px）或相对值（如%）。align-self：允许单个子项在交叉轴上有不同的对齐方式，覆盖align-items属性。可选值与align-items相同。
3. 示例
下面是一个简单的Flex布局示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局示例</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.item {
background-color: lightblue;
padding: 20px;
margin: 10px;
text-align: center;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
在这个示例中：
- 容器（
.container）被设置为flex容器，并且子项（.item）在主轴上（水平）的对齐方式为space-around，在交叉轴上（垂直）的对齐方式为center。 - 子项有一些基本的样式以便于观察效果。
通过上述示例和概念介绍，希望可以帮助你更好地理解和使用Flex布局。如果有具体的需求或者更复杂的布局，可以进一步深入学习Flex布局的各种属性和用法。
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
