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 剩下寬度

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

查看所有标签

猜你喜欢:

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

码农书籍

共鸣：内容运营方法论

舒扬 / 机械工业出版社 / 2017-5-8 / 59.00

近5年来网络信息量增长了近10倍，信息极度过剩。移动互联网以碎片化、强黏度以及惊人的覆盖率给传统的商业环境带来了巨大的影响，向陈旧的广告、公关、媒体行业展开了深度的冲击。传统的以渠道为中心的传播思想几近失效，优秀内容成为了各行业最稀缺的资产，这是时代赋予内容生产者的巨大机会。本书作者在多年经验和大量案例研究的基础上，总结出了移动互联网时代的内容运营方法论——共鸣，它将告诉我们如何收获核心粉......一起来看看《共鸣：内容运营方法论》这本书的介绍吧!

码农工具