效果1：
給容器設定屬性justify-content：space-evenly，紅色矩形之間的距離相等。除了space-evenly值以外，還有sapce-between/space-around…，設定屬性align-items: center;容器內的專案垂直居中。
/html>效果二：
給容器設定屬性align-items: center;讓容器中的專案垂直居中，這時候如果想要某個專案單獨排列，可以給這個專案單獨設定align-self:flex-end.
注意： align-items屬性是給容器設定的，align-self是給專案設定的。另外，還有乙個屬性是align-content,它也是設定容器的，只不過是專案多行的情況下用align-content，單**況下用align-items。
css彈性布局（flex）
1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...
css布局之彈性布局flex
作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...
Flex布局（CSS彈性盒子）
css3彈性盒子 flexible box或flexbox 是一種用於在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。摘自mdn 使用...