目录
一,flex布局VS传统布局
1.1传统布局
实现上面的结构,我们可以使用span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统布局</title>
<style>
div{
width: 80%;
height: 300px;
background-color: pink;
}
div span{
width: 150px;
height: 100px;
background-color: aqua;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</html>
1.2flex布局
Flex布局是CSS的一种布局模式,用于在容器内分配空间并对齐项目。它使得设计灵活且响应式。核心概念包括:
- 容器 (
display: flex
): 定义一个flex容器。 - 项目: 容器内的子元素,默认会在一行上排列。
- 主轴和交叉轴: 主轴是容器的主方向(水平或垂直),交叉轴垂直于主轴方向。
- 对齐属性: 如
justify-content
(主轴对齐)、align-items
(交叉轴对齐)、align-self
(项目单独对齐)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统布局</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</html>
两者之间对比,只需要使用一个display:flex就可以完成
二.走进flex布局
上述我们讲解了flex的作用,现在我们开发一下它的使用
2.1justify-content:子元素布局
1.flex-start
: 项目靠近主轴的起点对齐(默认值)。所有项目会从容器的起始边开始排列。
2.flex-end
: 项目靠近主轴的终点对齐。所有项目会从容器的结束边开始排列。
3.space-around
: 项目在主轴上均匀分布,项目之间的间距相等,但容器的起始边和结束边也会有项目的间距的一半。
4.space-between
: 项目在主轴上均匀分布,项目之间的间距相等,容器的起始边和结束边与项目之间没有额外间距。
5.center
: 项目在主轴上居中对齐。所有项目会在容器的中间对齐。
6.space-evenly
: 项目在主轴上均匀分布,所有项目之间的间距以及项目与容器边缘之间的间距都相等。
2.2flex-direction:主轴方向
设置主轴方向:
row:默认从左到右
row-reverse:从右到左
column:从上到下
colum:从下到上
注:主轴为X,侧轴方向就是y
2.3flex-wrap:是否换行
flex-wrap是 Flexbox 中的一个属性,用于控制项目是否换行以及如何换行。它决定了当项目超出容器的主轴空间时,项目如何在容器中换行。
1.nowrap
: 默认值。项目不会换行,所有项目都在一行上,即使这会导致容器溢出。
注:如果子元素元素的数目超出了父元素的容纳量,子元素的宽度会自动缩小
2.wrap
: 项目会在主轴空间不足时换行,形成多行。第一行的项目将从容器的起始边开始,第二行的项目接在第一行的下方,依此类推。
3.wrap-reverse
: 项目会在主轴空间不足时换行,但换行的顺序是反向的。第一行的项目从容器的结束边开始,第二行的项目在第一行的上方,依此类推。
2.4align-items:单行分布
让子元素在父容器里,实现垂直居中,也就是y轴上的分布
1.flex-satrt :项目靠近交叉轴的起始边对齐。
2.flex-end: 项目靠近交叉轴的结束边对齐。
3.center: 项目在交叉轴上居中对齐。
4.baseline: 项目沿着其文本基线对齐,使得所有项目的文本基线对齐。
5.stretch
: 默认值。项目在交叉轴上拉伸以填充容器(如果项目的高度或宽度是自动的)。
2.5align-content:多行分布
用于控制多行或多列项目的对齐方式的属性。它决定了在交叉轴(即与主轴垂直的方向)上,行(或列)之间的对齐和分布。这个属性在容器内有多行或多列项目时才会生效。
需要使用flex-wrap搭配使用!
1.flex-start: 行(或列)靠近交叉轴的起始边对齐
2.flex-end
: 行(或列)靠近交叉轴的结束边对齐。
3.center: 行(或列)在交叉轴上居中对齐。
4.space-between
: 行(或列)在交叉轴上均匀分布,项目之间的间距相等,容器的起始边和结束边与行(或列)之间没有额外间距。
5.space-around
: 行(或列)在交叉轴上均匀分布,项目之间的间距相等,但容器的起始边和结束边也会有项目的间距的一半。
2.6flex-flow: 设置主轴方向和是否换行
row: 按行排 nowrap: 不换行 wrap:换行 column:按列排
.container {
display: flex;
flex-flow: row nowrap;
}
三.子元素的属性
3.1flex:子项目占的份额
定义子项目分配剩余空间,用flex表示份数
例如:一个父容器里有三个子项目,其中,A占80px,B占20px,但是剩下的部分全给B,所以我们可以使用flex:1
3.2align-self:控制自己在侧轴的排列
例如,父亲元素安排好了flex,但是我希望第三个元素容器,可以不听指挥,在底部显示:
align-self:end
3.3order: 子项目的排序
例如我希望将父项目的第二个元素向前移动一位,使用order:-1即可
注:
一旦将父元素设置为flex布局,子元素的float、clear和vertical-align苏醒就失效了!