• CSS Properties
  • flex-basis
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
    .box {
6
        width: 250px;
7
        height: 200px;
8
        border: 1px solid #212b36;
9
        display: flex;
10
    }
11
​
12
    .box div {
13
        -flex-grow: 0;
14
        flex-shrink: 0;
15
        flex-basis: 50px;
16
    }
17
    .box div:nth-of-type(2) {
18
        flex-basis: 100px;
19
    }
20
</style>
21
</head>
22
<body>
23
​
24
<h1>The flex-basis Property</h1>
25
​
26
<div class="box">
27
    <div style="background-color:#00ab55;"></div>
28
    <div style="background-color:#ff4842;"></div>
29
    <div style="background-color:#ffc107;"></div>
30
    <div style="background-color:#1890ff;"></div>
31
</div>
32
​
33
</body>
34
</html>