CSS的弹性布局
弹性布局的介绍
弹性布局的英文是flexbox,简写flex。
弹性布局又称伸缩盒布局。弹性布局有容器、元素两大要素,元素可以随着容器大小的变化,自动改变大小,但是元素之间会按照一定的比例排布,使页面整洁,让人看起来舒服。
实现弹性布局的代码:display:flex;
弹性布局的常用语句
1.在主轴方向的排列方式——justify-content
默认是x轴。通常我们实现x轴的排列用这个语句。
:flex-start:元素在x轴上靠左开始排列。
:flex-end:元素在x轴上靠右开始排列。
:center:元素在x轴上居中排列。
:space-between:元素之间会有空白间隔开了。
:space-around:元素左右都会出现空白间隔开了,相当于有空白将元素包围起来了。
:flex-evenly:元素之间以及元素与容器之间的左右间距相等。
- 案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局</title>
<style>
.parent{
height: 300px;
border:1px solid blueviolet;
display: flex;
justify-content: flex-start;
}
.child{
width: 200px;
height: 200px;
border: 1px solid lawngreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
flex-start的效果图:
flex-end的效果图:
center的效果图:
space-between的效果图:
space-around的效果图:
space-evenly的效果图:
2.交叉轴的对齐方式:align-items
默认是y轴。通常实现垂直排列。
:flex-start:在y轴上元素靠顶排列。
:flex-end:在y轴上元素靠底排列。
:center:在y轴上元素居中排列。
:baseline:称为基线对齐,每个元素中的内容会水平对齐。
:stretch:称为拉伸,在元素没有设置高度的时候,可以通过这个代码将元素拉伸,和容器一样高。
- 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局</title>
<style>
.parent{
height: 300px;
border:1px solid blueviolet;
display: flex;
align-items: flex-start;
}
.child{
width: 200px;
height: 200px;
border: 1px solid lawngreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
flex-start的效果图:
flex-end的效果图:
center的效果图:
baseline的效果图:
需增加代码:是第二个孩子的内边距为20px。
.child:nth-child(2){
padding-top: 20px;
}
stretch的效果图:
在执行此效果之前,需要注释掉孩子的高度。
3.子元素的x轴与y轴的交换排列
- 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局</title>
<style>
.parent{
height: 300px;
border:2px solid blueviolet;
display: flex;
flex-direction: row;
}
.child{
width: 200px;
height: 200px;
border: 2px solid lawngreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</body>
</html>
行排列:也就是列布局。flex-direction:column;
倒叙列布局:flex-direction:column-reverse;
列排列:也就是行布局。flex-direction:row;
倒叙行布局:flex-direction:row-reverse;
换行:flex-wrap:wrap;
如果有设置子元素的固定宽高,在希望子元素不被父元素挤的情况下,可以执行换行。
- 案例代码:根据上面代码只需改变style
<style>
.parent{
height: 250px;
border:2px solid blueviolet;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.child{
width: 200px;
height: 100px;
border: 2px solid lawngreen;
}
</style>
4.多主轴:align-content
- 案例代码
<style>
.parent{
height: 250px;
border:2px solid blueviolet;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.child{
width: 200px;
height: 100px;
border: 2px solid lawngreen;
}
</style>
:flex-start:在y轴上子元素靠顶。
:flex-end:在y轴上子元素靠底。
center:上下居中。
:sapce-between:子元素之间会有间隔,但子元素和父元素之间没有间隔。
:space-around:子元素之间有间隔,而子元素和父元素之间也有间隔了。