CSS Flexbox 之水平對齊

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

内容简介：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 之水平對齊

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

查看所有标签

猜你喜欢:

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

码农书籍

Making Things See

Greg Borenstein / Make / 2012-2-3 / USD 39.99

Welcome to the Vision Revolution. With Microsoft's Kinect leading the way, you can now use 3D computer vision technology to build digital 3D models of people and objects that you can manipulate with g......一起来看看《Making Things See》这本书的介绍吧!

码农工具

MD5 加密

MD5 加密工具

RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具

HSV CMYK互换工具