第8章 弹性布局基础
CSS3引入了一个强大的布局模块------弹性布局(Flexbox),它提供了一种更加高效、直观的方式来排列和对齐元素,使复杂布局的实现变得更加简单。本章将详细介绍弹性布局的基本概念和属性,并通过具体示例帮助读者掌握如何使用弹性布局。
8.1 弹性布局简介
弹性布局(Flexbox)是一种一维布局模型,主要用于在一个方向上(水平或垂直)排列子元素。它能够让我们更轻松地创建各种复杂的布局,包括居中对齐、等宽列和灵活的项目排列。
特点
- 简化对齐和分布:无论容器内的元素有多少,弹性布局都能让它们均匀分布或对齐。
- 响应式设计:弹性布局能够根据容器的尺寸自动调整子元素的尺寸和排列方式,适合创建响应式设计。
- 灵活的项目尺寸:子元素可以按比例缩放或扩展,以填满容器的剩余空间。
8.2 弹性容器与弹性项目
弹性布局的核心概念是弹性容器(flex container)和弹性项目(flex item)。
- 弹性容器 :设置了
display: flex;
或display: inline-flex;
的元素。 - 弹性项目:弹性容器内的直接子元素。
示例
html
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
css
.flex-container {
display: flex; /* 将容器设为弹性容器 */
}
.flex-item {
padding: 10px;
background-color: #f0f0f0;
margin: 5px;
border: 1px solid #ccc;
}
8.3 弹性布局的基本属性
弹性容器的属性
-
flex-direction
:定义主轴的方向(弹性项目的排列方向)。-
取值:
row
(默认值),row-reverse
,column
,column-reverse
-
示例:
css.flex-container { flex-direction: row; /* 水平排列,默认值 */ }
-
-
flex-wrap
:定义弹性项目是否换行。-
取值:
nowrap
(默认值),wrap
,wrap-reverse
-
示例:
css.flex-container { flex-wrap: wrap; /* 允许弹性项目换行 */ }
-
-
justify-content
:定义主轴上的对齐方式。-
取值:
flex-start
(默认值),flex-end
,center
,space-between
,space-around
,space-evenly
-
示例:
css.flex-container { justify-content: space-between; /* 项目在主轴上均匀分布 */ }
-
-
align-items
:定义交叉轴上的对齐方式。-
取值:
stretch
(默认值),flex-start
,flex-end
,center
,baseline
-
示例:
css.flex-container { align-items: center; /* 项目在交叉轴上居中对齐 */ }
-
-
align-content
:定义多根轴线的对齐方式。如果只有一根轴线,该属性不起作用。-
取值:
stretch
(默认值),flex-start
,flex-end
,center
,space-between
,space-around
-
示例:
css.flex-container { align-content: space-around; /* 多根轴线均匀分布 */ }
-
弹性项目的属性
-
order
:定义项目的排列顺序,数值越小,排列越靠前。-
示例:
css.flex-item { order: 1; /* 默认值为0 */ }
-
-
flex-grow
:定义项目的放大比例。-
示例:
css.flex-item { flex-grow: 1; /* 项目将填满剩余空间 */ }
-
-
flex-shrink
:定义项目的缩小比例。-
示例:
css.flex-item { flex-shrink: 1; /* 项目可以缩小以适应容器 */ }
-
-
flex-basis
:定义在分配多余空间之前,项目的默认大小。-
示例:
css.flex-item { flex-basis: 100px; /* 项目的初始大小 */ }
-
-
align-self
:允许单个项目在交叉轴上对齐方式与其他项目不同。-
取值:
auto
(默认值),flex-start
,flex-end
,center
,baseline
,stretch
-
示例:
css.flex-item { align-self: flex-end; /* 项目在交叉轴上对齐到底部 */ }
-
8.4 简单弹性布局示例
以下示例展示了如何使用弹性布局属性创建一个简单的响应式布局。
示例1:水平排列项目
html
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
css
.flex-container {
display: flex; /* 将容器设为弹性容器 */
flex-direction: row; /* 项目水平排列 */
justify-content: space-around; /* 项目在主轴上均匀分布 */
align-items: center; /* 项目在交叉轴上居中对齐 */
height: 200px; /* 容器高度 */
border: 1px solid #ccc; /* 容器边框 */
}
.flex-item {
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 5px;
flex-grow: 1; /* 项目将填满剩余空间 */
}
示例2:垂直排列项目
html
<div class="flex-container-vertical">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
css
.flex-container-vertical {
display: flex; /* 将容器设为弹性容器 */
flex-direction: column; /* 项目垂直排列 */
justify-content: center; /* 项目在主轴上居中对齐 */
align-items: flex-start; /* 项目在交叉轴上靠左对齐 */
height: 300px; /* 容器高度 */
border: 1px solid #ccc; /* 容器边框 */
}
.flex-item {
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 5px;
flex-grow: 1; /* 项目将填满剩余空间 */
}