CSS-Flex 布局教程:实例篇

1,433 阅读2分钟

参考文章:Flex 布局教程:实例篇

一、骰子的布局

  • 骰子的一面,最多可以放置9个点。

下面,就来看看Flex如何实现,从1个点到9个点的布局。

如果不加说明,本节的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布局默认就是首行左对齐,所以一行代码就够了。

.box {
  display: flex;
}
  • 设置项目的对齐方式,就能实现居中对齐和右对齐。

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

.box {
  display: flex;
  justify-content: flex-end;
}
  • 设置交叉轴对齐方式,可以垂直移动主轴。

.box {
  display: flex;
  align-items: center;
}

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

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

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

1.2 双项目(先看容器布局,在此基础上移动项目布局)

  • justify-content

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

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
  • align-items

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

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

.box {
  display: flex;
}

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

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

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

1.3 三项目

.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)

.box {
  display: flex;
}
.item {
    flex: auto;
}

(2)

.box {
  display: flex;
}
.item {
    flex: none;
}

(3)

.box {
  display: flex;
}
.item {
    flex: 1; // 1 1 0%
}

(4)

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

.item:nth-child(2){
    flex: 0 0 50%;
}