css flex佈局中妙用margin: auto

在使用Flex佈局時僅使用align-items和justify-content有時並不能滿足我們的需要，通過margin: auto我們可以實現一些比較有用的佈局。

我們先弄一個小demo， 下面的例子都是基於這個demo做修改

<div id="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>
複製程式碼

#container {
  display: flex;
  justify-content: flex-end;
  background-color: lightyellow;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 75px;
  background-color: springgreen;
  border: 1px solid #333;
}
複製程式碼

1. 不一樣的兩端對齊

.box1 {
    margin-right: auto;
}
複製程式碼

在jsfiddle中檢視

.box5 {
    margin-left: auto;
}
複製程式碼

在jsfiddle中檢視

上面的例子並不限於一個元素

.box2 {
  margin-right: auto;
}
複製程式碼

在jsfiddle中檢視

2. 不一樣的space-between

.box1 {
  margin-right: auto;
}
.box5 {
  margin-left: auto;
}
複製程式碼

在jsfiddle中檢視

3. 不一樣的space-around

.box1, .box4 {
  margin-left: auto;
}
.box2, .box5 {
  margin-right: auto;
}
複製程式碼

在jsfiddle中檢視

4. 放置於角落

.box5 {
  align-self: flex-end;
  margin-left: auto;
}
複製程式碼

在jsfiddle中檢視

參考文章：

1. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?