跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮

歡迎來到第二周,這一周我們就要進入Flexbox了。今天我們會先認識Flexbox的起手式與flex-item的伸縮規則。

flex起手式

1.html的架構:

• 有個div(這裡叫row,但其實來當flex-container ,包裹住flex item
• flex-container中的第一層,就是flex-item

<div class="row">    <!--- flex container--->
  <div class="col">1</div>   <!--- flex item--->
  <div class="col">2</div>   <!--- flex item--->
  <div class="col">3</div>   <!--- flex item--->
</div>

補充:flex-item中元素就不是flex item了

2.css設置:對row設display:flex,row就變成了flex-container

.row{
  display:flex;
}

沒錯 ，就是這麼簡單!!

那我來看一下使用flexbox前後的變化瞜

Before

AFter

• col在使用前,是div,display是block。所以會占滿整行空間。
• 在使用flex,col變成flex-item後,col不再佔滿整行，而是縮小成其最小的寬度(文字的大小)，堆疊在同一行中。

為什麼row加上display:flex之後，col就會堆積在同一行呢?

flex-container的flex-direction預設是row。flex-container是一個一行的橫向的容器，裡面的item水平堆疊在同一行。

.row{
display:flex;
flex-direction:row; /*default*/

}

在上面的例子，我們看到了flex-item的寬度為其內容物的大小。這是因為item的寬度很小。

那麼讓我們來看第二個案例-item內容度長度大於container的寬度

案例-2:item內容度長度大於container的寬度

在col中插入許多的文字,其長度大於container寬度

<div class="row">  
 <div class="col">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae, exercitationem doloremque tempore non ullam necessitatibus aspernatur maxime quos at facilis itaque nisi animi deserunt autem delectus fugit excepturi perspiciatis inventore!</div>
    <div class="col">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae, exercitationem doloremque tempore non ullam necessitatibus aspernatur maxime quos at facilis itaque nisi animi deserunt autem delectus fugit excepturi perspiciatis inventore!</div>  
     <div class="col">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae, exercitationem doloremque tempore non ullam necessitatibus aspernatur maxime quos at facilis itaque nisi animi deserunt autem delectus fugit excepturi perspiciatis inventore! </div>
  </div>

接著，一樣對row加上flex,讓它變成flex-container

.row{   display:flex; }

這時候的結果是三個item縮小成三個等比例，整整齊齊一起排在一行中。

這真的太神奇了!! 到底發生了什麼事?

1.item的內容物都很長,長度長於container的寬度。也就是說內容物會傾向於伸展到100%的width。

2.但是container中有三個item,他們都想延伸至100%。

3.所以item必須進行縮放，由於item中的內容長度一樣(其實內容都一樣)，container的空間width:100% 去平分成三等份，每個item的width為33.33%。

item縮放的原理

由以上的兩個案例可以觀察flex-item縮放的原理，會受到item的內容長度、items的總寬度、container的寬度影響。

1.如果item的內容長度不長，總寬度不超過container的寬度。那麼就不會有縮放的問題。item都維持內容大小的原始寬度。

2.如果items的總寬度超過container的寬度，那麼item就要進行縮放

3.按照個別item的內容長度，按比例去縮放item的width，分配container的width:100%。

ex:A的長度與B的長度為2:3,兩者的總長度大於container的寬度。那A與B就會按照2:3的比例去均分container的寬度，A的width為40%，B的width為60%

item縮放的極限

上面有提到，flex-container是個一行的橫向容器。也就是說裡面的item都會縮放堆疊在一行之中。不過item在怎麼壓縮，都會它的最小寬度。如果以文字來說，就是一個字的寬度。

這裡我們來看個例子

item已經壓縮到了最小寬度-文字中最長的單字exercitationem的長度。

如果再壓縮的話,container的內容就會超出畫面，出現水平卷軸(scrollbar)

Recap

1.flex的起手式要準備要當flex-container與flex-item的html結構。flex-container包裹者flex-item

2.預設的flex-container是一行,所有的item都會縮放在一行

3.flex-item的寬度是其內容物的長度。

4.如果item的總寬度沒有超過container,那就沒有縮放的問題。

5.如果item的總寬度超過container,那item就會按照比例伸縮。

6.item縮小是有極限的，如果銀幕小於最小值，container的內容就會超過container超過螢幕。