鐵人賽 Day 7

補充最後一個 position 屬性的值 Sitcky

Sticky 具有 fixed 跟 relative 的兩種特性，預設會像 relative 一樣定位參考對象是父層，當視窗捲動到該元素則會有 fixed 的特性“黏”在視窗上跟著捲軸起移動，但是這個移動僅限於在父層。

<div class="container">
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
</div>

<style>
    div.container{
  height: 100%;
  width: 100%;
  border: 1px solid;
}
div{
  height: 250px;
  width: 50px;
  margin: 300px;
}
#one {
  width: 50px;
  background-color: dodgerblue;
  position: sticky;
  top: 10px;
  left: 40px;
}

#two,
#three
{
  background-color: grey;
}
</style>

Flexbox

Flexbox 是一種一維空間的排版模式，可以是直向排列或是橫向排列，
Flexbox 的優點在於可以不用計算 width、border、padding、margin等盒模型數值，只要上層空間設定display: flex 再加上 justify-content: space-between 底下的 flex items 就可以把 flexbox 空間平均分配 flex-items 之間且排出漂亮的版面。

基本的flexbox屬性

• flex-direction(flexbox的資料排列方向)
• flex-wrap (是否換行)
• align-item (交叉軸的空間排列)
• justify-content (主軸的空間排列)

主軸和交叉軸是直向還是橫向取決於 flex-direction 是 row 還是column 若是 row 主軸為橫向 交叉軸為直向，若是 column 則是相反。

Flexbox常見的應用可做電商網頁的導覽列(Navigation Bar)，或是網頁的搜索欄位(Search Bar)

補充:Flexbox 不支援舊型瀏覽器如 I.E 6-9 和 Opera 10。

Flexbox的練習範例

<nav class="container">
   <a href="#">今日優惠</a>
   <a href="#">禮品</a>
   <a href="#">家電</a>
   <a href="#">生鮮</a>
  <a href="#">食品</a>
  <a href="#">美妝</a>
</nav>

<style>
    
.container {
  background-color: grey;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}

a{
  margin: 5px;
}
</style>