flex

发表于 | 分类于

flex 网页常见布局效果

同一行等比划分

html

1
2
3
4
5
6
<div>
    <span>11</span>
    <span>22</span>
    <span>33</span>
    <span>44</span>
</div>

css

1
2
3
4
5
6
div {
      display: flex;
}
span {
      flex: 1;
}

左侧固定宽度，右边自适应

html

1
2
3
4
<div>
    <p>1</p>
    <span>2</span>
</div>

css

1
2
3
4
5
6
7
8
9
10
div {
    display: flex;
}
p{
    flex: 0 0 100px;
    width: 100px;
 }
span{
    flex: 1;
}

两侧固定宽度，中间自适应

html

1
2
3
4
5
<div>
    <span>1</span>
    <p>2</p>
    <span>3</span>
</div>

css

1
2
3
4
5
6
7
8
9
10
div{
    display: flex;
}
span{
     flex: 0 0 100px;
     width: 100px;
 }
 p{
    flex: 1;
}

最简单的水平垂直居中

html

1
2
3
<div>
    <p></p>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
    display: flex;
    align-items: center;        //垂直居中
    justify-content: center;    //水平居中
    width: 500px;
    height: 500px;
    border: 1px solid #000;
}
p{
    width: 100px;
    height: 100px;
    background-color: red;
}