iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
Modern Web

HTML 與 CSS 學習筆記系列 第 15

Day15 - Flex (2) - 外容器、軸線

  • 分享至 

  • xImage
  •  

外容器 (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>
  • w500m0-autop10fz40m10
.test {
    width: 500px;
    margin: 0 auto;
    padding: 10px;
    font-size: 40px;
    margin: 10px;
}

次回

繼續介紹 Flex 的部分


上一篇
Day14 - Flex (1) - 概述
下一篇
Day16 - Flex (3) - 軸線、justify-content 與 align-items
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言