-
左右贴边
<!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>1 2 3</body> </html>
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>
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>
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>
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>