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

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

查看所有标签

猜你喜欢:

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

码农书籍

Android 源码设计模式解析与实战

何红辉、关爱民 / 人民邮电出版社 / 2015-11 / 79.00元

本书专门介绍Android源代码的设计模式，共26章，主要讲解面向对象的六大原则、主流的设计模式以及MVC和MVP模式。主要内容为：优化代码的首步、开闭原则、里氏替换原则、依赖倒置原则、接口隔离原则、迪米特原则、单例模式、Builder模式、原型模式、工厂方法模式、抽象工厂模式、策略模式、状态模式、责任链模式、解释器模式、命令模式、观察者模式、备忘录模式、迭代器模式、模板方法模式、访问者模式、中介......一起来看看《Android 源码设计模式解析与实战》这本书的介绍吧!

码农工具