【網頁切版】flex（float併排、absolute相疊、flex外掛）

flexbox

• 最重要的數值放在「外層容器」（float設在元素上）
• 先設定主軸、附軸，然後再決定如何對齊
• display:flex 設定flex排版
• flex-direction:row/column 設定主軸附軸 （如果是row主軸在x軸上，如果是column主軸在y軸上）
• justify-content: flex-start / center / flex-end/space-around/space-between 主軸的對其
• align-items:flex-start / center / flex-end /space-around/space-between附軸的對齊
• 缺點是支援比較低，要不要用flex完全是看用戶數，如果消費者主要都是用IE的老人，就不適合用flex排版。

}

 <div class="out">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>

.out {
 background-color:blue;
 height:1000px;
 display:flex;
 flex-direction:row;  //設定主軸在X上，並且是左到右
 justify-content: flex-end; //設定對齊主軸的尾端
 align-items:flex-end;  //設定對齊附軸的尾端
 }

​

flex的navbar排版

<div class="outer">
  <div class="inner" style="margin-right:auto"></div> //可以隔開與他者的距離
  <div class="inner"></div>
  <div class="inner"></div>
</div>

.outer{
 //略
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;

}

align-self

• 可以單獨改變一塊的排版
• 寫在inner當中
• align-self：flex-start / center / flex-end/space-around/space-between

.inner{
  height:200px;
  width:30%;
  border:1px solid black;
  background-color:yellow;
}

.box1{ //寫在想要的區塊裡面
  align-self:flex-end;
}

​