CSS-Flex 佈局教程：例項篇

chrisghb發表於2018-12-15
CSSFlex

參考文章：Flex 佈局教程：例項篇

一、骰子的佈局

  • 骰子的一面，最多可以放置9個點。

CSS-Flex 佈局教程：例項篇

下面，就來看看Flex如何實現，從1個點到9個點的佈局。

CSS-Flex 佈局教程：例項篇

如果不加說明，本節的HTML模板一律如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 頁面自動重新整理 -->
    <meta http-equiv="refresh" content="1">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        .box {
            margin: 16px;
            padding: 4px;
            background-color: #e7e7e7;
            width: 104px;
            height: 104px;
            object-fit: contain;
            box-shadow:
                inset 0 5px white,
                inset 0 -5px #bbb,
                inset 5px 0 #d7d7d7,
                inset -5px 0 #d7d7d7;
            border-radius: 10%;

            /* flex容器屬性 */
            display: flex;
        }

        .item {
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin: 4px;
            background-color: #333;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="item"></span>
        <!-- <span class="item"></span> -->
    </div>
</body>
複製程式碼

上面程式碼中，div元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex專案。如果有多個專案，就要新增多個span元素，以此類推。

1.1 單專案

  • 首先，只有左上角1個點的情況。Flex佈局預設就是首行左對齊，所以一行程式碼就夠了。

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
}
複製程式碼
  • 設定專案的對齊方式，就能實現居中對齊和右對齊。

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  justify-content: center;
}
複製程式碼

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  justify-content: flex-end;
}
複製程式碼
  • 設定交叉軸對齊方式，可以垂直移動主軸。

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  align-items: center;
}
複製程式碼

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
複製程式碼

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
複製程式碼

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
複製程式碼

1.2 雙專案（先看容器佈局，在此基礎上移動專案佈局）

  • justify-content

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  justify-content: space-between;
}
複製程式碼
  • flex-direction

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
複製程式碼
  • align-items

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
複製程式碼

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
複製程式碼
  • align-self

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}
複製程式碼

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}
複製程式碼

1.3 三專案

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}
複製程式碼

二、專案flex屬性

  • 兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)

（1）

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
}
.item {
    flex: auto;
}
複製程式碼

（2）

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
}
.item {
    flex: none;
}
複製程式碼

（3）

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
}
.item {
    flex: 1; // 1 1 0%
}
複製程式碼

（4）

CSS-Flex 佈局教程：例項篇

.box {
  display: flex;
}
.item {
    flex: 1;
}
.item:nth-child(1){
    flex: 0 0 100%;
}

.item:nth-child(2){
    flex: 0 0 50%;
}
複製程式碼

相關文章