CSS Flexbox 之水平對齊

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

内容简介：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。

Left Alignment

style.css

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

.item {
  width: 300px;
}

.item1 {
  background-color: #faa;
}

.item2 {
  background-color: #afa;
}

.item3 {
  background-color: #aff;
}

第１行

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

display 為 flex ，表示使用 flexbox。

若沒特別指定 flex-direction ，預設為 row ，表示內容為 由左至右 。

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

CSS Flexbox 之水平對齊

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

flex-direction 為 row-reverse ，表示內容為 由右至左 。

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

CSS Flexbox 之水平對齊

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

Right Alignment

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

若沒特別指定 flex-direction ，預設為 row ，表示內容為 由左至右 。

justify-content 為 flex-end ，因為 由左至右 ，相當於 靠右對齊 。

CSS Flexbox 之水平對齊

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

flex-direction 為 row-reverse ，表示內容為 由右至左 。

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

CSS Flexbox 之水平對齊

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

Horizontal Center Alignment

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

若沒特別指定 flex-direction ，預設為 row ，表示 由左至右 。

justify-content 為 center ，相當於 水平置中 。

CSS Flexbox 之水平對齊

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

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

码农书籍

从界面到网络空间

（美）海姆 / 金吾伦/刘钢 / 上海科技教育出版社 / 2000-7 / 16.40元

计算机急剧改变了20世纪的生活。今天，我们凭借遍及全球的计算机网络加速了过去以广播、报纸和电视形式进行的交流。思想风驰电掣般在全球翻飞。仅在角落中潜伏着已完善的虚拟实在。在虚拟实在吕，我们能将自己沉浸于感官模拟，不仅对现实世界，也对假想世界。当我们开始在真实世界与虚拟世界之间转换时，迈克尔·海姆问，我们对实在的感觉如何改变？在〈从界面到网络空间〉中，海姆探讨了这一问题，以及信息时代其他哲学问题。他......一起来看看《从界面到网络空间》这本书的介绍吧!

码农工具