面試官讓我用 Flex 寫色子布局，我直接寫了六種

作者：一碗周 2022-07-13 17:47:54

開發(fā) 前端

面試中經(jīng)常會被問道前端布局的實現(xiàn)，最典型的就是使用Flex實現(xiàn)色子的布局，這篇文章會逐步的介紹如何使用Flex實現(xiàn)色子的各個點數(shù)的布局。

復習一下Flex布局屬性

在實現(xiàn)色子布局之前，我們先來復習一下這幾個Flex布局的屬性：

justify-content：用于調整元素在主軸的對其方式；

align-items：用于調整元素在側軸的對其方式；

align-self：設置元素自身在側軸的對齊方式；

flex-direction：定義主軸是水平還是垂直或者正反方向。

多說無益，我們直接來寫代碼

實現(xiàn)一點布局

實現(xiàn)一點布局就非常簡單了，可以說就是一個水平垂直居中，用flex布局實現(xiàn)相當?shù)娜菀祝瑢崿F(xiàn)代碼如下：

html

<body>
  <div class="warp">
    <div class="pip"></div>
  </div>
</body>
復制代碼

css

<style>
  .warp {
    display: flex;
    /* 實現(xiàn) 一點 布局 */
    justify-content: center;
    align-items: center;
  }
</style>
復制代碼

這里只貼出核心代碼，剩余代碼就是一些樣式樣的調整。

實現(xiàn)效果如下：

這里我們用到了justify-content和align-items，就輕松的實現(xiàn)了色子的一點布局。

實現(xiàn)二點布局

現(xiàn)在我們實現(xiàn)色子的二點布局，實現(xiàn)代碼如下：

html

<body>
  <div class="warp">
    <div class="column"><div class="pip"></div></div>
    <div class="column"><div class="pip"></div></div>
  </div>
</body>
復制代碼

css

<style>
  .warp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .column {
    display: flex;
  }
  .column:nth-child(2) {
    justify-content: flex-end;
  }
</style>
復制代碼

這僅僅是實現(xiàn)的一種方案，還有別的寫法。

實現(xiàn)三點布局

三點布局與二點布局類似，只需要再添加一行即可，實現(xiàn)代碼如下：

html

<body>
  <div class="warp">
    <div class="column"><div class="pip"></div></div>
    <div class="column"><div class="pip"></div></div>
    <div class="column"><div class="pip"></div></div>
  </div>
</body>
復制代碼

css

<style>
  .warp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .column {
    display: flex;
  }
  .column:nth-child(2) {
    justify-content: center;
  }
  .column:nth-child(3) {
    justify-content: flex-end;
  }
</style>
復制代碼

運行效果如下：

實現(xiàn)四點布局

四點布局可以說是二點布局的變種，實現(xiàn)代碼如下：

html

<body>
  <div class="warp">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
</body>
復制代碼

css

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-between;
}
復制代碼

運行效果如下：

實現(xiàn)五點布局

實現(xiàn)五點布局可以在四點布局的基礎上增加一行，示例代碼如下：

html

<body>
  <div class="warp">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
</body>
復制代碼

css

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-between;
}
.column:nth-child(2) {
  justify-content: center;
}
復制代碼

運行效果如下：

實現(xiàn)六點布局

實現(xiàn)六點布局可以在四點布局的基礎上增加一行，示例代碼如下：

html

<body>
  <div class="warp">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
</body>
復制代碼

css

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-around;
}
復制代碼

運行效果如下：

責任編輯：武曉燕來源：前端YUE

布局 Flex 代碼