今天沒事把css彈性盒常用及要注意的做一下整理：
先上代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<style>
#main {
width: 400px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
justify-content: flex-start;
align-items:center; /* 垂直方向上居中 */
}
#main div {
width:80px;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
</div>
justify-content詳解
定義和用法
justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
提示：使用 align-content 屬性對齊交叉軸上的各項（垂直）。
屬性值
flex-start 默認值。整體靠容器左側對齊
flex-end 整體靠容器右側對齊
center 整體位於容器的中心
space-between 各行之間留有空白
space-around 各行周圍留有空白
initial 設置該屬性爲它的默認值
inherit 從父元素繼承該屬性
注意
彈性盒父級必須display:flex;
flex:1;讓所有彈性盒模型對象的子元素都有相同的長度,但是忽略它們內部的內容；內容過多還是要設置寬度，防止佈局錯亂