CSS Flexbox 之間距相等

栏目: CSS · 发布时间: 5年前

内容简介：有時候 Item 並沒有完全均分 Container，而希望其間距相等，也就是剩餘寬度被間距均分，此時可使用WebStorm 2019.1.3Safari 12.1.1

有時候 Item 並沒有完全均分 Container，而希望其間距相等，也就是剩餘寬度被間距均分，此時可使用 justify-content 的 space 系列設定。

Version

WebStorm 2019.1.3

Safari 12.1.1

CSS 3

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

對 3 個 <div> 做 layout。

Space Between

CSS Flexbox 之間距相等

RGB 並沒有均分 container，但 紫色 間距是相等的。

style.css

.box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 960px;
  height: 240px;
  margin: auto;
  background-color: #d3d3d3;
}

.item {
  width: 230px;
}

.item1 {
  background-color: #faa;
}

.item2 {
  background-color: #afa;
}

.item3 {
  background-color: #aff;
}

第１行

.box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

flex-direction 為 row ，表示內容為 由左至右 。

justify-content 為 space-between ，表示：

Item 與 item 間隔平分 container 剩下寬度
第一個 item 與最後一個 item 都貼齊 container，不使用 container 剩下寬度

Space Around

CSS Flexbox 之間距相等

.box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

flex-direction 為 row ，表示內容為 由左至右 。

justify-content 為 space-around ，表示：

Item 與 item 間隔平分 container 剩下寬度
第一個 item 與最後一個 item 也會使用 container 剩下寬度，但只有 item 與 item 間寬度的一半

Space Evenly

CSS Flexbox 之間距相等

.box {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

flex-direction 為 row ，表示內容為 由左至右 。

justify-content 為 space-evenly ，表示：

Item 與 item 間隔平分 container 剩下寬度
第一個 item 與最後一個 item 也會使用 container 剩下寬度，與 item 與 item 間寬度相等

Conclusion

實務上 space-between 與 space-around 較常使用，可平分 container 剩下寬度

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

内容创业：内容、分发、赢利新模式

张贵泉、张洵瑒 / 电子工业出版社 / 2018-6 / 49

越来越多的内容平台、行业巨头、资本纷纷加入内容分发的战争中，竞争非常激烈。优质的原创性内容将成为行业中最宝贵的资源。在这样的行业形势下，如何把内容创业做好？如何提高自身竞争力？如何在这场战争中武装自己？是每一位内容创业者都应该认真考虑的问题。《内容创业：内容、分发、赢利新模式》旨在帮助内容创业者解决这些问题，为想要进入内容行业的创业者出谋划策，手把手教大家如何更好地进行内容创业，获得更高的......一起来看看《内容创业：内容、分发、赢利新模式》这本书的介绍吧!

码农工具