css实现九宫格

练习

通用结构

<div class="box">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
    </div>

公共样式

/* 解决ul自带的间隙问题*/
* {
    padding:0; 
    margin:0; 
}
.box {
    height: 400px;
 }
li {
     list-style:none;
     border-radius: 5px;
     background-color: rgb(196, 237, 222);
 }

1. flex + clac()

自适应

ul {
    ...
    width:100%;
    height:100%;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    align-content: space-between;
}
/* calc()里的百分比可以根据互相之间需要的间隙多大调整，*/
li {
    ...
    width: calc(95% / 3);
    height: calc(95% / 3);
}