flex效果
<body> <div id="box"> <div style="background-color: red;">a</div> <div style="background-color: yellow;">b</div> <div style="background-color: #cc0ccc;">c</div> </div> </body> <style> #box{ display: flex; } #box>div{ width: 200px; height: 30px; } </style>运行结果:
align-items定义flex布局里面子块(div)的垂直对齐方式
<body> <div id="box"> <div style="background-color: red;">a</div> <div style="background-color: yellow;">b</div> <div style="background-color: #cc0ccc;">c</div> </div> </body> <style> #box{ display: flex; /* align-items定义flex布局里面子块(div)的垂直对齐方式 */ align-items: center; height: 100px; background-color: #456; } #box>div{ width: 200px; height: 30px; } </style>运行结果:
align-items定义flex布局里面子块(div)的水平对齐方式
<body> <div id="box"> <div style="background-color: red;">a</div> <div style="background-color: yellow;">b</div> <div style="background-color: #cc0ccc;">c</div> </div> </body> <style> #box{ display: flex; /* justify-content定义flex布局里面子块(div)的水平对齐方式 */ justify-content: center; height: 100px; background-color: #456; } #box>div{ width: 200px; height: 30px; } </style>运行结果:
flex-direction定义flex布局里面子块(div)的排列方向
<body> <div id="box"> <div style="background-color: red;">a</div> <div style="background-color: yellow;">b</div> <div style="background-color: #cc0ccc;">c</div> </div> </body> <style> #box{ display: flex; /* flex-direction定义flex布局里面子块(div)的排列方向 */ flex-direction: row-reverse; height: 100px; background-color: #456; } #box>div{ width: 200px; height: 30px; } </style>运行结果:
justify-content:space-between
<body> <div id="box"> <div style="background-color: red;">a</div> <div style="background-color: yellow;">b</div> </div> </body> <style> #box{ display: flex; /* flex-flow: row nowrap; */ justify-content:space-between; height: 100px; background-color: #456; } #box>div{ width: 200px; height: 30px; } </style>运行结果:
