Css Block

Flex 结合 Auto

在 flex 布局下合理使用 margin: auto 属性，可以实现意想不到的效果。

样本


<div class="flex">
    <div class="flex-box"></div>
    <div class="flex-box"></div>
    <div class="flex-box"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
}
1
2
3
4
5
6
7
8

示例 1


<div class="flex">
    <div class="flex-box" style="margin-left:auto"></div>
    <div class="flex-box"></div>
    <div class="flex-box"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
}
1
2
3
4
5
6
7
8

示例 2


<div class="flex">
    <div class="flex-box" style="margin-right:auto"></div>
    <div class="flex-box"></div>
    <div class="flex-box"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
}
1
2
3
4
5
6
7
8

示例 3


<div class="flex">
    <div class="flex-box"></div>
    <div class="flex-box" style="margin:auto"></div>
    <div class="flex-box"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
}
1
2
3
4
5
6
7
8

示例 4


<div class="flex">
    <div class="flex-box"></div>
    <div class="flex-box"></div>
    <div class="flex-box"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
    margin: auto;
}
1
2
3
4
5
6
7
8
9

示例 5


<div class="flex">
    <div class="flex-box"></div>
    <div class="flex-box"></div>
    <div class="flex-box" style="margin-left:auto"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
}
1
2
3
4
5
6
7
8

← 重置样式表 →