跟著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超過螢幕。
你可能也想看
