CSS实现自适应九宫格

4,413 阅读2分钟

最近面试有遇到这样的题,这才发现自己很久都疏于整理css的知识了,今天来整理一下。为了代码简便,这里实现四宫格以代替九宫格

题目:实现四宫格,子元素宽度自适应父元素宽度,间距为10px

实现方法有:

  • Flex
  • Grid
  • Table
  • Float TODO

Flex

由于flex是元素在一维的布局,所以用div元素将子元素分不同行,子元素用flex-grow来实现自适应宽度

1.有row分隔行

<div class="container">
  <div class='row'>
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class='row'>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</div>
<style type="text/css">
    .container { }
    .row {
      display: flex;
      margin: 10px 0;
    }
    .item {
      margin: 0 10px;
      background: red;
      flex-grow: 1;
    }
    .item:last-child {
      margin-left: 0;
    }
</style>

2.没有row分隔行(为了增加难度这里写九宫格)

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<style type="text/css">
    .container {
    	display: flex;
    	flex-wrap: wrap;
    }
    .item {
      background: red;
      // 方法一
      width: calc(100% / 3);
      // 方法二
      flex-basis: calc(100% / 3);
    }
</style>

Grid

grid就是为这种二维布局而生的, fr单位类似于flex-grow实现自适应

 <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<style type="text/css">
   .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
   }
   .item {
      background: red;
   }
</style>

Table

我发现table布局还是很实用的,宽度自适应也可以用table实现。

<div class="container">
  <div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="row">
    <div class="item">3</div>
    <div class="item">4</div>
  </div>       
</div>
<style type="text/css">
   .container {
      display: table;
      width: 100%;
      border-spacing: 10px;
   }
   .row {
      display: table-row;
   }
   .item {
      background: red;
      display: table-cell;
   }
</style>