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

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

查看所有标签

猜你喜欢:

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

码农书籍

JavaScript修炼之道

波顿纽威 / 巩朋、张铁 / 人民邮电 / 2011-11 / 29.00元

《JavaScript修炼之道》是JavaScript的实战秘籍。作者将自己多年的编程经验融入其中，不仅可以作为学习之用，更是日常JavaScript开发中不可多得的参考手册，使读者少走很多弯路。《JavaScript修炼之道》的内容涵盖了当今流行的JavaScript库的运行机制，也提供了许多应用案例。《JavaScript修炼之道》针对各任务采取对页式编排，在对各任务的讲解中，左页解释了任务的......一起来看看《JavaScript修炼之道》这本书的介绍吧!

码农工具