flexbox父盒子align-content属性

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex-container {
display: flex;
/*换行后有多根轴线,align-content在只有一根轴线的情况下看不到效果*/
flex-wrap: wrap; /* align-content适用于多根轴线,行与行之间的布局 */
/*默认值:子盒子均等分父盒子的高度*/
/*align-content: stretch;*/ /*整体上对齐*/
/*align-content: flex-start;*/ /*整体居中对齐*/
/*align-content: center;*/ /*整体下对齐*/
/*align-content: flex-end;*/ /*行与行,平分父盒子多余的空白*/
/*align-content: space-between;*/ /*各行均等分,子盒子在该行垂直居中显示*/
align-content: space-around;
width: 400px;
height: 400px;
background-color: gray;
} .flex-item {
background-color: green;
width: 100px;
margin: 5px;
}
</style>
</head> <body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 4</div>
<div class="flex-item">flex item 5</div>
<div class="flex-item">flex item 6</div>
<div class="flex-item">flex item 7</div>
</div>
</body> </html>

flexbox父盒子align-content属性

上一篇:ucenter通信实现同步登录、同步退出(详细)


下一篇:轮播神器swiper插件