flex布局極大程度上方便了頁面的構建，如下的幾種布局當中，為了不增加額外的標簽來嵌套，單獨使用flex布局的話，還需要其他一些設置來處理，比如與偽元素的配合使用，這個下次再進行描述，這里flex與margin的使用配合，個人認為是目前自己用過最方便的一種方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex margin</title>
<style>
.wrapper {
display: flex;
margin: 50px 0;
}
.wrapper > div {
border: 1px solid purple;
background-color: pink;
width: 200px;
}
.wrapper-1 .item-3 {
margin-left: auto;
}
/* .wrapper-2 .item-2 {
margin-left: auto;
} */
/* 下面三行代碼與上面注釋掉的三行代碼是同樣效果的 */
.wrapper-2 .item-1 {
margin-right: auto;
}
.wrapper-3 > div {
margin: auto;/*效果同 justify-content：space-around*/
}
.wrapper-4 > .item-3 {
margin: auto;
}
.wrapper-5 > .item-2 {
margin-left: auto;
}
.wrapper-5 > .item-3 {
margin-right: auto;
}
</style>
</head>
<body>
<div class="wrapper wrapper-1">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
</div>
<div class="wrapper wrapper-2">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
</div>
<div class="wrapper wrapper-3">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
</div>
<div class="wrapper wrapper-4">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
</div>
<div class="wrapper wrapper-5">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
</div>
</body>
</html>
參考鏈接: 你未必知道的49個CSS知識點