使用flex 布局让子元素 左右间距相等
效果展示
使子元素左右间距相等布局
三种方法
1、justify-content: space-evenly;
2、justify-content: space-between; 和伪类
3、子元素 margin: 0 auto; margin-left: 0; 第一个子元素margin-left: auto;
示例
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>flex center</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.divtext{
margin: 100px auto -100px;
width: 600px;
height: 40px;
line-height: 40px;
font-weight: 700;
font-size: 22px;
text-align: center;
}
</style>
</head>
<body>
<!-- space-evenly 使子元素左右间距相等布局-->
<style type="text/css">
.div1{
width: 600px;
border: 1px solid;
display: flex;
justify-content: space-evenly;
margin: 100px auto;
}
.div1 div{
width: 100px;
height: 100px;
border: 1px solid;
text-align: center;
line-height: 100px;
}
</style>
<div class="divtext">
space-evenly 使子元素左右间距相等布局
</div>
<div class="div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<!-- space-between 和伪类使子元素左右间距相等布局-->
<style type="text/css">
.div2{
width: 600px;
border: 1px solid;
display: flex;
justify-content: space-between;
margin: 100px auto;
}
.div2::before,.div2::after{
content: '''';
display: block;
}
.div2 div{
width: 100px;
height: 100px;
border: 1px solid;
text-align: center;
line-height: 100px;
}
</style>
<div class="divtext">
space-between 和伪类使子元素左右间距相等布局
</div>
<div class="div2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<!-- display:flex和子元素 margin 使子元素左右间距相等布局 -->
<style type="text/css">
.div3{
width: 600px;
border: 1px solid;
display: flex;
margin: 100px auto;
}
.div3 div{
width: 100px;
height: 100px;
border: 1px solid;
text-align: center;
line-height: 100px;
margin: 0 auto;
margin-left: 0;
}
.div3 div:first-child{
margin-left: auto;
}
</style>
<div class="divtext">
display:flex和子元素 margin 使子元素左右间距相等布局
</div>
<div class="div3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</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
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
