外容器 (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;
}

快速輸入

• .classname

<div class="classname"></div>

• .item*3

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

• w500、m0-auto、p10、fz40、m10

.test {
    width: 500px;
    margin: 0 auto;
    padding: 10px;
    font-size: 40px;
    margin: 10px;
}

次回

繼續介紹 Flex 的部分