flex九宫格
2018-11-27 本文已影响0人
壮壮成长记
用flex累的九宫格
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
font-size: 14px;
color: gray;
}
.yellow {
background: goldenrod;
}
.blue {
background: skyblue;
}
.contain{
padding: 3px;
}
/* 使其居中 */
.contain{
position: absolute;
top:50%;
margin-top: -300px;
left:50%;
margin-left:-300px;
}
/* 使其内部居中 */
.contain {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content:space-around;
align-items: center;
align-content: space-around;
}
/* 设置大小 */
.contain {
width: 500px;
height: 500px;
}
.contain div {
border: 1px solid #808080;
}
.item{
display: flex;
align-items: center;
justify-content: center;
}
.item>span{
/* background: #808080; */
}
.item {
background: goldenrod;
width: 32%;
height: 32%;
}
</style>
</head>
<body>
<div id="contain" class="contain blue">
<div class="item "><span>1</span></div>
<div class="item "><span>2</span></div>
<div class="item "><span>3</span></div>
<div class="item "><span>4</span></div>
<div class="item "><span>5</span></div>
<div class="item "><span>6</span></div>
<div class="item "><span>7</span></div>
<div class="item "><span>8</span></div>
<div class="item "><span>9</span></div>
</div>
</body>
