1. 左右贴边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent{
width: 800px;
background: red;
height: 200px;
display: flex;
justify-content: space-between;
}
#parent span{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="parent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
2.左右不贴边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent{
width: 800px;
background: red;
height: 200px;
display: flex;
justify-content: space-around;
}
#parent span{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="parent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
3.元素自动换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent{
width: 600px;
background: red;
height: 300px;
display: flex;
/*flex布局中,默认的子元素是不换行的nowrap, 如果装不开,会缩小子元素的宽度,放到父元素里面*/
flex-wrap: wrap;/*换行*/
}
#parent span{
width: 100px;
height: 100px;
background: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div id="parent">
<span>1</span>
<span>2</span>
<span>3</span>
<span>3</span>
<span>3</span>
<span>3</span>
<span>3</span>
<span>3</span>
</div>
</body>
</html>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
4.垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent{
width: 600px;
background: red;
height: 300px;
display: flex;
/*默认的主轴是 x轴 row */
justify-content: center;
/*我们需要一个侧轴居中*/
align-items: center;
}
#parent span{
width: 100px;
height: 100px;
background: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div id="parent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
5.子元素的高度自适应父元素(拉伸)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent{
width: 600px;
background: red;
height: 300px;
display: flex;
/*默认的主轴是 x轴 row */
justify-content: center;
/*拉伸,但是子盒子不要给高度*/
align-items:stretch;
}
#parent span{
width: 100px;
background: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div id="parent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.