CSS Flexbox 之垂直對齊

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

内容简介：Flexbox 對於macOS Mojave 10.14.5WebStorm 2019.1.3

Flexbox 對於 垂直對齊 ，並沒有專屬 Property 設定，而是由 row-direction 與 justify-content 決定。

Version

macOS Mojave 10.14.5

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。

Top Alignment

style.css

.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 960px;
  height: 400px;
  margin: auto;
  background-color: #d3d3d3;
}

.item {
  width: 960px;
  height: 120px;
}

.item1 {
  background-color: #faa;
}

.item2 {
  background-color: #afa;
}

.item3 {
  background-color: #aff;
}

第１行

.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

display 為 flex ，表示使用 flexbox。

flex-direction 為 column ，表示 由上至下 。

justify-content 為 flex-start ，因為 由上至下 ，相當於 靠上對齊 。

CSS Flexbox 之垂直對齊

.box {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

flex-direction 為 column-reverse ，表示內容為 由下至上 。

justify-content 為 flex-end ，表示從尾部開始對齊，相當於 靠上對齊 。

CSS Flexbox 之垂直對齊

因為 flex-direction 設定不同，所以前者內容為 由上至下 ，後者為 由下至上 ，但結果都是 靠上對齊 。

Bottom Alignment

.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

flex-direction 為 column ，表示內容為 由上至下 。

justify-content 為 flex-end ，表示從尾部開始對齊，相當於 靠下對齊 。

CSS Flexbox 之垂直對齊

.box {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}

flex-direction 為 column-reverse ，表示內容為 由下至上 。

justify-content 為 flex-start ，表示從頭部開始對齊，相當於 靠下對齊 。

CSS Flexbox 之垂直對齊

因為 flex-direction 設定不同，所以前者內容為 由上至下 ，後者為 由下至上 ，但結果都是 靠下對齊 。

Vertical Center Alignment

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

flex-direction 為 column ，表示內容為 由上至下 。

justify-content 為 center ，相當於 垂直置中 。

CSS Flexbox 之垂直對齊

以上所述就是小编给大家介绍的《CSS Flexbox 之垂直對齊》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

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

码农书籍

深入解析Spring MVC与Web Flow

Seth Ladd、Darren Davison、Steven Devijver、Colin Yates / 徐哲、沈艳 / 人民邮电出版社 / 2008-11 / 49.00元

《深入解析Spring MVCgn Web Flow》是Spring MVC 和Web Flow 两个框架的权威指南，书中包括的技巧和提示可以让你从这个灵活的框架中汲取尽可能多的信息。书中包含了一些开发良好设计和解耦的Web 应用程序的最佳实践，介绍了Spring 框架中的Spring MVC 和Spring Web Flow，以及着重介绍利用Spring 框架和Spring MVC 编写Web ......一起来看看《深入解析Spring MVC与Web Flow》这本书的介绍吧!

码农工具

URL 编码/解码

RGB CMYK 转换工具

RGB CMYK 互转工具