CSS3 - 响应式布局【伸缩布局】
2019-03-24 本文已影响0人
Hyso
设置为伸缩盒子
display: flex;
当在元素的样式中添加如上属性时，则表明元素为伸缩盒子。
当设置某个元素为伸缩盒子后，其直接子元素将会在一行上显示（未设置为伸缩盒子时，其直接子元素需设置为 float:left; 才能在一行上显示）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
为什么在伸缩盒子中，直接子元素会在一行上显示？
1）子元素是按照伸缩盒子中的主轴方向显示的。当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将被自适应。
2）只有伸缩盒子才有主轴和侧轴。主轴：默认水平从左向右显示。侧轴：始终垂直于主轴。
设置伸缩比
问：某一个元素宽度为 577px，此元素中有 N 个直接子元素，如何将这 N 个子元素设置成同等宽度？
答：首先将元素设置为伸缩盒子，然后设置其直接子元素的伸缩比即可。
flex: n;
flex 样式属性用于设置元素的伸缩比。n 的取值为正整数，表示占整个份数中的多少份。整个份数 = 元素的每个直接子元素的 flex 属性值之和。
- 示例1：将元素分为三等分，其每个直接子元素占其中 1 分，即三分之一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 577px;
height: 100px;
border: 1px solid #AB1212;
display: flex;
}
.one {
flex: 1;
background-color: #000000;
}
.two {
flex: 1;
background-color: #EDEDED;
}
.three {
flex: 1;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
运行结果：
- 示例2：将元素分为四等分。其直接子元素 class="one" 和 class="three"占其中 1 分，即四分之一；其直接子元素 class="two" 占其中 2 分，即四分之二；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 577px;
height: 100px;
border: 1px solid #AB1212;
display: flex;
}
.one {
flex: 1;
background-color: #000000;
}
.two {
flex: 2;
background-color: #EDEDED;
}
.three {
flex: 1;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
运行结果：
设置伸缩盒子中子元素在主轴方向的对齐方式
justify-content: flex-start|flex-end|center|space-between|space-around;
-
flex-start：默认值。主轴的开头对齐。
-
flex-end：主轴的结尾对齐。
-
center：主轴的中心对齐。
-
space-between：主轴两端对齐，中间自适应空白空间。
-
space-around：每个子元素主轴两边留有相同宽度的空白空间。
设置伸缩盒子主轴的方向
flex-direction: row|row-reverse|column|column-reverse;
-
row：默认值。主轴方向为从左到右。
-
row-reverse：主轴方向为从右到左。
-
column：主轴方向为从上到下。
-
column-reverse：主轴方向为从下到上。
设置伸缩盒子中子元素在侧轴方向的对齐方式
align-items: stretch|center|flex-start|flex-end|baseline;
-
stretch：默认值。如果子元素未设置高度，则会被沿侧轴方向拉伸。
-
center：子元素在侧轴中间。
-
flex-start：侧轴为从上到下显示时，子元素位于侧轴上方。
-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。
设置伸缩盒子中的直接子元素换行显示
flex-wrap: wrap|no-wrap|wrap-reverse;
- no-wrap：默认值。不换行显示。
当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将根据伸缩盒子宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
}
.one {
width: 250px;
height: 250px;
background-color: #000000;
}
.two {
width: 250px;
height: 250px;
background-color: #EDEDED;
}
.three {
width: 250px;
height: 250px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
- wrap：换行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
}
.one {
width: 250px;
height: 250px;
background-color: #000000;
}
.two {
width: 250px;
height: 250px;
background-color: #EDEDED;
}
.three {
width: 250px;
height: 250px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
- wrap-reverse：以与 wrap 相反的方向换行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 500px;
height: 500px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap-reverse;
}
.one {
width: 250px;
height: 250px;
background-color: #000000;
}
.two {
width: 250px;
height: 250px;
background-color: #EDEDED;
}
.three {
width: 250px;
height: 250px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
设置伸缩盒子中换行显示子元素在侧轴方向的对齐方式
align-content: stretch|center|flex-start|flex-end|space-between|space-around;
- stretch：默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: stretch
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
- center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
- flex-start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
- space-between
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
- space-around
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid #AB1212;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.one {
width: 150px;
height: 150px;
background-color: #000000;
}
.two {
width: 150px;
height: 150px;
background-color: #EDEDED;
}
.three {
width: 150px;
height: 150px;
background-color: #EE3030;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
