Flex弹性盒模型
·
目录
！ align-items vs align-content 区别：
Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。
核心概念：
采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。
- Flex 容器(父元素)：通过
display: flex或display: inline-flex定义的父元素。 - Flex 项目(子元素)：Flex 容器的直接子元素，通过 Flex 布局可以灵活控制它们的排列、对齐和尺寸。Flex 项目默认沿主轴排列，主轴方向由
flex-direction属性决定。
Flex 容器有两根轴：
主轴（默认由flex-direction定义)：水平左右方向，子元素默认顺着主轴从左到右排。
交叉轴：默认垂直上下方向，和主轴相互垂直。
对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。
空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。
1. 父元素加 display: flex，子元素自动水平排列
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex布局示例1 - 基本容器（按照默认规则排列）</title>
<style>
.container {
/* 通过 display:flex 将此元素强制转换为 Flex 容器 */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
border: 2px solid #aaa;
width: 600px;
height: 300px;
padding: 10px;
}
.item {
background-color: #4CAF50;
border: 3px solid red;
width: 80px;
height: 40px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h3>Flex容器示例（项目按照容器默认规则排列）</h3>
<div class="container">
<!-- 块元素：从上到下文档流排列 -->
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
</div>
</body>
</html>
2.父元素不加 display: flex，子元素的排列则遵循标准文档流的默认布局规则
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex布局示例1 - 基本容器（按照默认规则排列）</title>
<style>
.container {
/* 通过 display:flex 将此元素强制转换为 Flex 容器 */
/*display: flex;*/
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
border: 2px solid #aaa;
width: 600px;
height: 300px;
padding: 10px;
}
.item {
background-color: #4CAF50;
border: 3px solid red;
width: 80px;
height: 40px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h3>Flex容器示例（项目按照容器默认规则排列）</h3>
<div class="container">
<!-- 块元素：从上到下文档流排列 -->
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
</div>
</body>
</html>
Flex 容器默认规则（不写属性时则默认值）
1. flex-direction:
定义主轴方向，决定项目的排列方向。
row（默认）：水平排列，从左到右，项目会水平排列成一排。row-reverse：水平排列，从右到左。column：垂直排列，从上到下。column-reverse：垂直排列，从下到上。
2.flex-wrap：
控制项目是否换行。
nowrap（默认）：不换行，项目会被压缩以适应容器宽度，所以项目可能溢出（除非设置 flex-shrink: 0）。wrap：换行，从上到下排列，项目超出容器时自动换到下一行。wrap-reverse：换行，从下到上排列，反向显示（第一行在底部）。
3.justify-content:
定义项目在主轴上的对齐方式。
flex-start（默认）：项目靠主轴起点（向左）对齐。flex-end：项目靠主轴终点（向右）对齐。center：项目在主轴方向居中对齐space-evenly：项目间隔完全均等。（项目之间以及项目与容器边缘的间距完全相等）space-between：项目之间间距相等，但首尾项目紧贴容器边缘。space-around：项目在容器中均匀分布，项目两侧的外边距相等（项目之间间距是边缘间距的2倍）。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title >Flex布局示例3 - justify-content（主轴对齐方式）</title>
<style>
/*
====== justify-content 属性详解 ======
作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布
前提：只有在主轴方向有剩余空间时才会生效
可选值：
1. flex-start → 项目靠主轴起点（左边）对齐（默认值）
2. flex-end → 项目靠主轴终点（右边）对齐
3. center → 项目在主轴方向居中对齐
4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等
5. space-between → 项目之间间距相等，但首尾项目紧贴容器边缘
6. space-around → 项目两侧的外边距相等（项目之间间距是边缘间距的2倍）
*/
.container {
display: flex;
border: 2px solid #a00;
padding: 10px;
height: 50px;
}
/*
====== 项目样式 ======
简单设置项目的尺寸和外观
*/
.item {
background-color: #4CAF50;
border: 3px solid red;
width: 80px;
height: 40px;
color: white;
/* margin: 5px;
padding: 20px; */
text-align: center;
}
</style>
</head>
<body>
<h1 align="center" >justify-content（控制主轴对齐方式）</h1>
<!-- justify-content属性的六种取值，控制项目在主轴上的对齐方式和间距分布。 -->
<h3>1. justify-content: flex-start 项目在容器中，以主轴起点对齐（默认值）</h3>
<div class="container" style="justify-content: flex-start;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>2. justify-content: flex-end 项目在容器中，以主轴终点对齐</h3>
<div class="container" style="justify-content: flex-end;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>3. justify-content: center 项目在容器中，以主轴居中对齐</h3>
<div class="container" style="justify-content: center;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>4. justify-content: space-evenly 项目在容器中均匀分布</h3>
<div class="container" style="justify-content: space-evenly;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>5. justify-content: space-between 项目在容器中均匀分布，但首尾项目紧贴容器边缘</h3>
<div class="container" style="justify-content: space-between;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>6. justify-content: space-around 项目在容器中均匀分布，但每个项目两侧外边距相等</h3>
<div class="container" style="justify-content: space-around;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
</body>
</html>效果图如下：
4.align-items:
定义项目在交叉轴上的对齐方式。
stretch（默认）：拉伸填充容器，项目会拉伸填满整个交叉轴方向。flex-start：向交叉轴起点对齐。flex-end：向交叉轴终点对齐。center：居中对齐。baseline：按基线对齐。
5.align-content:
定义多行项目在交叉轴上的对齐方式（仅多行有效）。
stretch（默认）：拉伸填充交叉轴，项目会拉伸填满整个容器。flex-start：向交叉轴起点对齐。center：居中对齐。flex-end：向交叉轴终点对齐。space-between：两端对齐，第一行靠顶，最后一行靠底。space-around：均匀分布。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex布局示例6 - 多行项目在容器交叉轴方向的对齐方式（含换行控制）</title>
<style>
/*
====== align-content 属性详解 ======
作用：控制多行项目在交叉轴（垂直方向）上的对齐方式
！！！重要前提：
1. 必须先使用 flex-wrap: wrap 换行（产生多行） ！！如果没有设置换行（或flex-wrap 被注释），则 align-content 实际不生效
2. 只有一行时，align-content 无效
3. 只有在交叉轴方向有剩余空间时才会生效
可选值：
1. stretch → 默认值，行拉伸填满剩余空间（行内项目也会被拉伸）
2. flex-start → 所有行靠交叉轴起点（顶部）对齐
3. center → 所有行在交叉轴方向居中对齐
4. flex-end → 所有行靠交叉轴终点（底部）对齐
5. space-between → 行之间间距相等，首行靠顶，末行靠底
6. space-around → 行上下间距相等，整体与容器边缘也有间距
*/
/* 定义flex容器的基础样式 */
.container {
display: flex; /* 将容器设置为flex布局 */
width: 500px; /* 容器宽度固定，控制换行效果 */
height: 250px; /* 容器高度固定，为交叉轴留出空间 */
border: 2px solid #333; /* 容器边框，方便观察整体范围 */
margin: 10px; /* 容器之间的外边距，避免拥挤 */
flex-wrap: wrap; /* 强制换行：当项目总宽度超过容器时自动换行，产生多行 */
}
/*
====== 项目样式 ======
注意：本示例中项目没有 margin，所以 flex-shrink 可以正常压缩
如果项目有 margin，margin 不会参与压缩，可能导致溢出
*/
.item {
width: 160px;
height: 40px;
border: green solid 1px;
color: red;
text-align: center;
/* 项目外边距（注释掉，为了让 flex-shrink 正常压缩）*/
/* margin: 5px; */
}
/* 标题样式 */
p {
margin: 20px 0 5px 10px;
}
</style>
</head>
<body>
<h1 align="center">align-content (多行项目在容器交叉轴方向上的对齐方式)</h1>
<!--
第一个容器没有设置 align-content，所以使用默认值 stretch
由于没有换行（flex-wrap 被注释），所以 align-content 实际不生效
-->
<p>1. align-content: stretch（默认值，行拉伸填满剩余空间（行内项目也会被拉伸））</p>
<div class="container" style="align-content: stretch;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<!-- 2. align-content: flex-start -->
<!-- 效果：所有行靠容器顶部对齐 -->
<p>2. align-content: flex-start（所有行整体靠交叉轴起点/顶部）</p>
<div class="container" style="align-content: flex-start;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<!-- 3. align-content: center -->
<!-- 效果：所有行作为一个整体，在容器垂直方向居中 -->
<p>3. align-content: center（所有行整体在交叉轴中间/垂直居中）</p>
<div class="container" style="align-content: center;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<!-- 4. align-content: flex-end -->
<!-- 效果：所有行靠容器底部对齐 -->
<p>4. align-content: flex-end（所有行整体靠交叉轴终点/底部）</p>
<div class="container" style="align-content: flex-end;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<!-- 5. align-content: space-between -->
<!-- 效果：第一行靠顶，最后一行靠底，行之间间距相等 -->
<p>5. align-content: space-between（行与行之间间距相等，第一行靠顶，最后一行靠底）</p>
<div class="container" style="align-content: space-between;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<!-- 6. align-content: space-around -->
<!-- 效果：每行上下间距相等，整体与容器边缘也有间距 -->
<p>6. align-content: space-around（行上下都有相等间距，整体与容器边缘也有间距）</p>
<div class="container" style="align-content: space-around;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>效果图如下：
！ align-items vs align-content 区别：
- align-items: 作用于"单行"内的所有项目（垂直方向的对齐）
- align-content: 作用于"多行"整体（多行作为一个整体在容器中的对齐）
项目（item）的默认规则
1.flex-grow:
定义项目的放大比例。
→ 默认不自动放大，默认值为 0（当容器有剩余空间时）：flex-grow: 0
→ 如果想自动放大: flex-grow: 1
2.flex-shrink:
定义项目的缩小比例（默认值为 1，即空间不足时缩小）。
→ （当项目总宽度超过容器时）默认会自动收缩：flex-shrink: 1
→ 注意：只有 width/flex-basis 参与收缩，margin/padding/border 不会收缩！
→ 如果不想收缩: flex-shrink: 0
3.flex-basis:
定义项目在分配多余空间前的初始大小（默认值为 auto，项目的大小根据内容或显式设置的 width/height 决定。）。
→ 项目的基础尺寸，默认取 width 值
→ 也可以设置为具体像素（如 px、em、rem 或百分比（%），直接指定项目的初始大小）: flex-basis: 100px;
→根据项目内容自动调整大小（部分浏览器可能不支持）: flex-basis:content
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)