布局详解 - 翁先森的博客

flex布局深入了解#

1. flex布局#

flex容器的属性#

属性名称	属性含义	属性可能的值
`flex-direction`	决定主轴的方向	`row`(默认) 水平，起点在左端 `row-reverse`水平，起点在右端 `column`:垂直，起点在上沿`column-reverse`:垂直，起点在下沿
`flex-wrap`	决定一条轴线放不下，如何换行	`Nowrap`(默认) 不换行 `Wrap`:换行，第一行在上面 `Wrap-reverse`:换行，第一行在下面
`flex-flow`	是上面两个属性的简写	默认值是 `row nowrap`
`justify-content`	定义项目在主轴上的对齐方式	`Flex-start`(默认值）左对齐 `Flex-end` 右对齐 `Center`居中 `Space-between`:两端对齐，项目之间的间隔都相等 `Space-around`:每个项目之间的间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍
`align-items`	定义项目在交叉轴上如何对齐	`Flex-start`交叉轴的起点对齐 `Flex-end`交叉轴的终点对齐 `Center`:交叉轴的中点对齐 `Baseline`：项目的第一行文字的基线对齐 `Stretch` （默认值）如果项目未设置高度或者设为auto，将占满整个容器的高度
`align-content`	定义多跟轴线对齐方式，一条轴线该属性不起作用	`Flex-start`: 与交叉轴的起点对齐 `Flex-end` 与交叉轴的终点对齐 `Center`:与交叉轴的中点对齐 `Space-between`:与交叉轴的两端对齐，轴线之间的间隔平均分布 `Space-around`：每根轴线之间的间隔都相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍

flex容器下面项目的属性 #

属性名称	属性含义	属性可能的值
`order`	定义项目的排列顺序，数值越小，排列越靠前	默认0
`flex-grow`	定义项目的放大比例，如果存在剩余空间，不放大	默认0（如果所有项目的`flex-grow`属性为1，则等分剩余空间）
`flex-shrink`	定义项目的缩小比例	默认1 负值对该属性无效
`flex-basis`	定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性来计算主轴是否有多余空间	默认`auto`,即项目本来大小
`flex`	是上面三个的简写	默认值 0 1 auto 后两个值可选
`align-self`	允许单个项目与其他项目不一样的对齐方式，可覆盖`align-items`属性	默认值auto 表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`

2.1 常用的垂直居中#

css#

1
.container {
2
            display: flex;
3
            align-items: center;
4
            justify-content: center;
5
            height: 500px;
6
            background: #666;
7
        }
8

9
.box {
10
            width: 200px;
11
            height: 200px;
12
            background: #ff0;
13
        }

Html#

1
<div class="container">
2
       <div class="box">hello 翁恺敏</div>
3
</div>

效果图：

2.2 常用的ul,li布局横向等宽排列#

Html#

1
<ul class="container">
2
        <li>翁</li>
3
        <li>恺</li>
4
        <li>敏</li>
5
        <li>你</li>
6
        <li>好</li>
7
    </ul>

css#

1
.container {
2
            width: 500px;
3
            display: flex;
4
            list-style: none;
5
            padding: 0;
6
        }
7
        .container >li{
8
            flex: 1;
9
            height: 50px;
10
        }
11
        .container >li:nth-of-type(2n){
12
            background: red
13
        }
14
        .container >li:nth-of-type(2n-1){
15
            background: green
16
        }

2.3 骰子布局详解#

2.3.1 单项目#

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

1
.box {
2
  display: flex;
3
}

设置项目的对齐方式，就能实现居中对齐和右对齐。

1
.box {
2
  display: flex;
3
  justify-content: center;
4
}

1
.box {
2
  display: flex;
3
  justify-content: flex-end;
4
}

设置交叉轴对齐方式，可以垂直移动主轴。垂直居中

1
.box {
2
  display: flex;
3
  align-items: center;
4
}

1
.box {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}

1
.box {
2
  display: flex;
3
  justify-content: center;
4
  align-items: flex-end;
5
}

1
.box {
2
  display: flex;
3
  justify-content: flex-end;
4
  align-items: flex-end;
5
}

2.3.2 双项目#

1
.box {
2
  display: flex;
3
  justify-content: space-between;
4
}

1
.box {
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: space-between;
5
}

1
.box {
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: space-between;
5
  align-items: center;
6
}

1
.box {
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: space-between;
5
  align-items: center;
6
}

1
.box {
2
  display: flex;
3
}
4

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

1
.box {
2
  display: flex;
3
  justify-content: space-between;
4
}
5

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

2.3.3 三项目#

1
.box {
2
  display: flex;
3
}
4

5
.item:nth-child(2) {
6
  align-self: center;
7
}
8

9
.item:nth-child(3) {
10
  align-self: flex-end;
11
}

2.3.3 四项目#

1
.box {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: flex-end;
5
  align-content: space-between;
6
}

HTML

1
<div class="box">
2
  <div class="column">
3
    <span class="item"></span>
4
    <span class="item"></span>
5
  </div>
6
  <div class="column">
7
    <span class="item"></span>
8
    <span class="item"></span>
9
  </div>
10
</div>

css

1
.box {
2
  display: flex;
3
  flex-wrap: wrap;
4
  align-content: space-between;
5
}
6

7
.column {
8
  flex-basis: 100%;
9
  display: flex;
10
  justify-content: space-between;
11
}

2.3.4 六项目#

1
.box {
2
  display: flex;
3
  flex-wrap: wrap;
4
  align-content: space-between;
5
}

1
.box {
2
  display: flex;
3
  flex-direction: column;
4
  flex-wrap: wrap;
5
  align-content: space-between;
6
}

2.4 圣杯布局（常见）#

html#

1
<div class="container">
2
        <header>Header</header>
3
        <div class="content">
4
            <main>Main</main>
5
            <nav>Nav</nav>
6
            <aside>Aside</aside>
7
        </div>
8
        <footer>Footer</footer>
9
    </div>

css#

1
* {
2
            margin: 0;
3
            padding: 0;
4
        }
5

6
        html,
7
        body {
8
            width: 100%;
9
            height: 100%;
10
        }
11

12
        .container {
13
            display: flex;
14
            /* 垂直*/
15
            flex-direction: column;
16
            width: 100%;
17
            /*视口被均分为100单位的vh 占据整个窗口*/
18
            min-height: 100vh;
19
        }
20

21
        header,
22
        footer {
23
            background: #999;
24
            /*放大缩小比例为0 占据垂直方向80px*/
25
            flex: 0 0 80px;
26
        }
27

28
        .content {
29
            display: flex;
30
            /*1 1 auto 后两个值省略*/
31
            flex: 1;
32
        }
33

34
        nav {
35
            /*默认 0 数值越小 排列越靠前*/
36
            order: -1;
37
            flex: 0 0 80px;
38
            background: royalblue;
39
        }
40

41
        aside {
42
            flex: 0 0 80px;
43
            background: aqua;
44
        }
45

46
        main {
47
            flex: 1;
48
            background: green;
49
        }

flex布局深入了解#

1. flex布局#

flex容器的属性#

**flex容器下面项目的属性 **#

2.1 常用的垂直居中#

css#

Html#

2.2 常用的ul,li布局横向等宽排列#

Html#

css#

2.3 骰子布局详解#

2.3.1 单项目#

2.3.2 双项目#

2.3.3 三项目#

2.3.3 四项目#

2.3.4 六项目#

2.4 圣杯布局（常见）#

html#

css#

flex容器下面项目的属性 #