CSS3 伸縮盒子布局

伸縮布局

傳統布局和伸縮布局

• 布局的傳統解決方案，基於盒裝模型，依賴display屬性+position屬性+float屬性
• 對於特殊布局非常不便
• CSS3在布局方面做了非常大的改進
• 使得我們對塊級元素的布局排列變得十分靈活，適宜性非常強
• 其強大的伸縮性，在響應式開發中發揮極大的作用

重要屬性

• display: flex;
• 給父元素設置了這個屬性，其子元素都會自動的變成伸縮項(flex item)

justify-content

• justify-content

• 設置或檢索彈性盒子元素在主軸(默認橫軸)方向上的對其方式

• 語法：

  • flex-start彈性盒子元素向行起始位置對齊
  • flex-end彈性盒子元素向行結束位置對齊
  • center彈性盒子元素向行中間位置對齊
  • space-between左右對其父容器的開始和結束，中間平均分頁，產生相同的間距
  • space-around將多余的空間平均的分頁在每一個子元素的兩邊
    • 類似於magin: 0 auto;
    • 造成中間盒子的間距時左右兩邊盒子間距的兩倍

• 代碼演示

  • 首先創建一個父容器包裹四個子容器

  <div class="father"> 
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
  </div>
  

  • 父元素設置

  .father {
  width: 900px;
  height: 200px;
  border: 1px solid red;
  box-sizing: border-box;
  }
  

  • 子元素寬高200px，顏色各不相同
    
  • 然后給父元素添加屬性display: flex;
  • 下面是各種情況下的盒子排列

  

  

  

  

  

  

• 當子元素寬度和大於父容器寬度的時候，子元素會自動的平均收縮

  • 將父元素高度設置為600px
  • 在添加第五個盒子
    
  • 第五個盒子並沒有擠下來，每個盒子都一樣大
    
  • (900-2) / 5 = 179.6px
  • 每個元素都在平均收縮，但可能並不是我們想要的結果

flex-flow

• flex-flow:=flex-wrap: + flex-direction:

  • 簡寫屬性

• flex-wrap:控制子元素是否換行顯示，默認不換行

  • nowrap不換行，仍然收縮顯示
  • wrap換行
    
  • wrap-reverse翻轉(不常用)
    

• flex-direction:設置子元素的排列方向

  • 就是用來設置主軸(默認橫軸)方向
    • 默認主軸方向是row
      
    • 我們來試一下
      
  • 值
    • row水平方向排列，從左至右
    • row-reverse水平方向排列，從右至左
    • column垂直方向排列，從上至下
    • column-reverse垂直方向排列，從下至上

• flex-grow:可以來擴展子元素的寬度

  • 對子元素進行設置
  • flex-grow:的默認值為0:說明子元素不會去占據剩余的空間
  • 具體是用來設置當前元素占據剩余空間的比例值
  • 比例值計算 : (當前空間的flex-grow)/(所有兄弟元素的flex-grow的和)

• 代碼演示

  • 去掉4，5兩個盒子
    
  • 給盒子1添加屬性flex-grow:1
    
  • 盒子1吸收掉了所有的剩余空間
  • 給盒子1，2，3都添加屬性flex-grow:1
    
  • 三個盒子均等分了剩余空間

flex-shrink

• flex-shrink定於收縮比例，通過設置的值來計算收縮空間

  • 默認值為1
  • 值為1時，將不去承擔收縮比例
  • 具體是用來設置當前元素收縮的比例值
  • 比例值計算:(當前元素的flex-shrink)/(所有兄弟元素的flex-shrink的和)

• 代碼演示

  • 我們將父元素寬度改為500px
    
  • 現在每個盒子都只有166px大小了
  • 我們將盒子1設置屬性flex-shrink:1
  • 盒子並無變化，因為其默認值本來就是1
  • 現在我們將盒子1設置屬性flex-shrink:2
    
  • 盒子1變成了149px大小
    
  • 盒子2，3變成了174.5px
  • 盒子1收縮程度占據了兩份，盒子2，3收縮程度占據了一份
  • 現在我們將3個盒子屬性都設置為flex-shrink:0
    
  • 頁面發生了偽溢出(謹慎設置)

flex

• flex = flex-grow + flex-shrink + flex-basis
  • 簡寫屬性
  • 默認值為 0 1 auto
  • 后兩個屬性為可選屬性
  • flex一般是用來設置伸縮子項占據剩余空間的比例值(常用)

align-items

• align-items是設置子元素(伸縮項)在側軸方向上的對齊方式

  • 父元素設置的屬性
  • center 設置在側軸方向上居中對齊
  • flex-start 設置在側軸方向上頂對齊
  • flex-end 設置在側軸方向上底對齊
  • stretch 拉伸
    • 讓子元素在側軸方向上進行拉伸，填充滿整個側軸方向，
    • 注意盒子不要有高度值
  • baseline文本基線

• align-self設置單個元素在側軸上的對齊方式

• 代碼演示

  • 我們還是保留三個盒子，並將父元素寬度改為900px
    
  • 父元素設置屬性align-items:center
    
  • 父元素設置屬性align-items:flex-start
    
  • 父元素設置屬性align-items:flex-end
    
  • 父元素設置屬性align-items:stretch,注意這里要把子元素的高度屬性移除掉
    
  • 這里給三個盒子添加文字大小不一的文本
    
  • 父元素設置屬性align-items:baseline
    
  • 接下來給單個元素設置屬性
  • 給盒子1設置屬性align-self:center
    

• 最后獻上我用伸縮盒子做的新語義化元素的結構圖

• 改變big盒子大小里面的子元素會等比例縮小和變大
  

    <div class="big">
        <header>header</header>
        <nav>nav</nav>
        <div class="small">
            <article>article
                <section>section</section>
            </article>
            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    </div>

.big {
    margin-left: 300px;
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column; 
    border: 1px solid black;
    text-align: center;
    font-size: 2em;
}
header {
    background-color: red;
    width: 100%;
    flex: 1;
}
nav{
    background-color: yellow;
    width: 100%;
    flex: 1;
}
.small {
    flex: 2;
    display: flex;
}
article {
    background-color: blue;
    height: 100%;
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
section {
    background-color: pink;
    width: 50%;
    height: 50%;
}
aside{
    background-color: green;
    height: 100%;
    flex: 2;
}
footer{
    width: 100%;
    background-color: #008484; 
    flex: 1;
}

• 本人新學菜鳥一名，以上純屬我學習成果，不足之處請大家多多指教！