江湖小栈

Do Better

0%

CSS Flexbox 弹性盒子

发表于 分类于 Hot°C：  精品文章
本文字数： 2.7k 阅读时长 ≈ 2 分钟
CSS Flexbox 弹性盒子详解

CSS Flexbox 超详细图解！带图！速收藏！

前几天，我在一个外网上看到一篇 Flexbox 的文章，图文并茂，特别不错。所以，特地转了几张图片分享给大家！(本文未对 FlexBox 的相关属性进行解释，仅适用于有一定基础的朋友阅读。)

介绍

  2009年，W3C提出了一种新的方案，叫Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。连 Bootstrap4 都是基于 FlexBox 来设计的。
  FlexBox 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局(display: flex;)。

flex-direction

元素的排列方向

flex-wrap

决定是否换行

justify-content

元素在主轴上的对齐方式

align-items

元素在交叉轴上如何对齐

align-content

行与行的对齐方式

align-self

元素自身在交叉轴的对齐方式

另外补充一下，justify-self是无效的。假如我们想让主轴上某个元素居左或者居右，可以通过 margin-left/right: auto; 来实现。

order

元素的排列顺序，数字越小越靠前，默认为0。

flex-basis

flex-basis(默认值:auto)属性定义了在分配多余空间之前，项目占据的主轴空间。

  flex-basis是主轴方向上的长度，而且会根据父元素大小自动适配，即若子元素 flex-basis > 父元素主轴上长度，那么子元素的长度会等于父元素，并不会溢出。若所有子元素的 flex-basis 之和 > 父元素主轴上长度，那么子元素会按 flex-basis 进行比例计算，并按比例占满父元素。

  • flex-direction: row; => flex-basis ≈ width
  • flex-direction: column; => flex-basis ≈ height
  • 同时设置 flex-basis 与 width/height 时，flex-basis > width。
  • 若 flex-basis 和 width/height 其中有一个是 auto，那么另外一个非 auto 的属性优先级会更高。
  • 若 flex-basis 设置为 0, 则子元素内容周围的剩余空间不会根据 flex-grow 按比例分配。
  • 若 flex-basis 设置为 auto，则子元素周围的剩余空间会根据 flex-grow 按照比例分配。

flex-grow&flex-shrink

flex-grow是定义元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink是定义元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。

关于比例的计算，后续会更新相关介绍！

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

测试代码

提供相关测试代码，可自行理解测试！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<!DOCTYPE html>
<html lang="zh" >
  <head>
    <meta charset="UTF-8">
    <title>flex-test</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      html,body{
        width: 100%;
        height: 100%;
      }
      body{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .bigdiv{
        width: 600px;
        height: 60%;
        background: #e2cafd;
        margin: 10px auto;
        border: 1px solid #000;
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*align-content: flex-end;*/
        /*flex-wrap: wrap;*/
      }
      .box1,.box2,.box3 {
        background: #ffa378;
        height: 100px;
        border-radius: 30px;
        line-height: 100px;
        font-size: 50px;
        font-weight: bolder;
        overflow: hidden;
      }
      .box1{
        width: 200px;
        /*flex: 1;*/
        /*flex-grow: 1;*/
        /*flex-shrink: 1;*/
        /*flex-basis: auto;*/
        /*order: 1;*/
      }
      .box2{
        width: 300px;
        /*flex: 1;*/
        /*flex-grow: 1;*/
        /*flex-shrink: 1;*/
        /*flex-basis: auto;*/
        /*order: 1;*/
      }
      .box3{
        width: 100px;
        /*flex: 1;*/
        /*flex-grow: 1;*/
        /*flex-shrink: 1;*/
        /*flex-basis: auto;*/
        /*order: 1;*/
      }
    </style>
  </head>
  <body>
    <div class="bigdiv">
      <div class="box1">
        HXB
      </div>
      <div class="box2">
        HXB
      </div>
      <div class="box3">
        HXB
      </div>
    </div>
  </body>
</html>

相关推荐
bulb