外容器 (Container)

參考 CodePen 連結，試著將註解的行數依描述進行調整

• try01：要加display才會顯示 Flex 的效果
• try02：寬度不會超過外容器設定的值
• try03：高度會隨最大的延伸
  HTML

<div class="container">
  <div class="item">1</div>
  <div class="item item2">
   2
  </div>
  <div class="item">3</div> 
  <div class="item">4</div> 
</div>

CSS

.container{
/*   display: flex;  try01 */
  background: #004466;
  width: 500px;
  margin: 0 auto;
  padding: 10px;
}
.item{
/*   width: 100px;   try02 改成1000px */
  background: #00ffa2;
  color: #004466;
  font-size: 36px;
  text-align: center;
  margin: 10px;
}
.item2{
/*   height: 300px; try03 */
}

軸線

主軸 (main axis)：左至右 (橫)
交錯軸 (cross axis)：上至下 (直)
flex-direction：對齊的方法，一般 row 指橫向，column 指直向

• row：從左到右排列(預設)
• row-reverse：從右到左排列
• column：從上到下排列
• column-reverse：從下到上排列
  參考 CodePen 連結，試著將註解的行數進行四種對齊的測試

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container{
  width: 500px;
  height: 400px;
  margin: 0 auto;
  background: #004466;
  padding: 20px;
  display: flex;
/*   flex-direction: row-reverse; */
}
.item{
  width: 100px;
  background: #00ffa2;
  margin-left: 10px;
  margin-right: 10px;
  color: #004466;
  font-size: 36px;
  text-align: center;
}

主軸 (main axis) 與交錯軸 (cross axis) 的關係如下表 二者一定是垂直關係 交錯軸只有上至下與左至右 2 種