🏴 設定在父層Container 　　己經定義了「display: flex」

• （一）內容項目是否換行

  flex-wrap: nowrap;  (預設) flex-wrap: wrap; flex-wrap: wrap-reverse;

• （二）內容項目排列方向

  flex-direction: row;  (預設) flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;

• （三）內容項目水平對齊

  justify-content: flex-start;  (預設) justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; justify-content: space-evenly;

• （四）項目垂直對齊(文字為主)

  align-items: stretch;  (預設) align-items: center; align-items: flex-start; align-items: flex-end; align-items: baseline;

• （五）項目垂直對齊(框架為主)

  align-content: stretch;  (預設) align-content: center; align-content: flex-start; align-content: flex-end; align-content: space-between; align-content: space-around; align-content: space-evenly;

CSS3 Flex Box 彈性框的測試學習

以下是二個範例，同時會套用左側的選擇而改變，請仔細觀察！ 【練習1】 【練習2】 【練習3】 【練習4】

 <!-- 已安排的HTML --> 
<div class="container">
    <div class="item" style="font-size: 30px;">Item1</div>
    <div class="item" style="font-size: 20px;">Item2 Item2</div>
    <div class="item">Item3 Item3 Item3</div>
</div>

 /* 已安排的CSS */ 
.container { background-color:#ffb8db; margin-bottom:2rem; max-width:900px; min-height:250px; display:flex; }
.item { background-color:skyblue; margin:10px; }