flex 应用

Posted on

今天面试问到flex布局实现1-9骰子的排布，所以来总结一下。

数字一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container{
            height: 150px;
            width: 150px;
            background-color: #ffcc99;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
#item1{
            height: 40px;
            width:40px;
            margin: 2.5px;
            border-radius: 20px;
            background-color: black;
        }
<div id="container">
    <div id="item1"></div>
</div>

数字二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 #two{
            height: 150px;
            width: 150px;
            border-radius: 5px;
            background-color: #ffcc99;
            margin-top: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
 #two-item1,#two-item2{
            height: 40px;
            width: 40px;
            border-radius: 20px;
            background-color: black;
            margin: 5px;
        }
<div id = "two">
    <div id="two-item1"></div>
    <div id="two-item2"></div>
</div>

注意 以下代码都基于这两个类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container{
            height: 150px;
            width: 150px;
            background-color: #ffcc99;
            border-radius: 5px;
            margin-top: 5px;
        }
 .item{
            height: 40px;
            width: 40px;
            border-radius: 20px;
            background-color: black;
            margin: 5px;
        }

三

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 #three{
            display: flex;
            flex-direction: row;
        }
 #three-item2{
          align-self: center;
        }
 #three-item3{
            align-self: flex-end;
        }
<div id="three" class="container">
    <div id="three-item1" class="item"></div>
    <div id="three-item2" class="item"></div>
    <div id="three-item3" class="item"></div>
</div>

四

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 #four{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
 #four-line1,#four-line2{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
<div id="four" class="container">
    <div id="four-line1">
        <div class="item" id="four-item1"></div>
        <div class="item" id="four-item2"></div>
    </div>
    <div id="four-line2">
        <div class="item" id="four-item3"></div>
        <div class="item" id="four-item4"></div>
    </div>
</div>

五

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
 #five{
            display: flex;
            flex-direction: column;
        }
 #five-line1,#five-line3{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
 #five-line2{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
<div class="container" id="five">
    <div id="five-line1">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="five-line2">
        <div class="item"></div>
    </div>
    <div id="five-line3">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

六

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 #six{
            display: flex;
            flex-direction: column;
        }
 #six-line1,#six-line2,#six-line3{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
<div class="container" id="six">
    <div id="six-line1">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="six-line2">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="six-line3">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

九

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 #nine{
            display: flex;
            flex-direction: row;
        }
<div class="container" id="nine">
    <div id="nine-line1">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="nine-line2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="nine-line3">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

结果如图所示
demo