CSS Flexbox 之間距相等

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

内容简介：有時候 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 剩下寬度

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

查看所有标签

猜你喜欢:

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

码农书籍

高中数学公式定律及要点透析

牛胜玉编 / 2011-2 / 9.80元

《PASS绿卡图书:高中数学公式定律及要点透析(人教A版)(必修+选修)(第9次修订)》精选例句：时尚鲜活例句，再现巩固单词；延伸拓展：搭配用法辨析，提升运用能力；真题例句：精选真题例句，紧密联系高考。便于携带：三年教材词汇，方便随时记忆；附赠录音：用耳朵记单词，让学习零空隙。一起来看看《高中数学公式定律及要点透析》这本书的介绍吧!

码农工具