<style>
/*
------------------
- - - - - - - -
- - - - - - - -
- -
- -
------------------
外部的大矩形就是flexContainer 內部每一個小矩形都是flexItem
*/
.container{
display:flex;
width:500px;
border:solid 1px blue;
flex-direction:row;/*起始是以那個方向爲基準按順序排列 可選值有row(從左到右) column(從上到下) row-reverse(從右到左) column-reverse(從下到上)*/
/*justify-content:space-evenly;*/
/*以flex-direction屬性爲基準(如果沒有設置flex-direction,則默認flex-direction爲row,flex-direction也稱爲主軸方向。)，來決定整個flex item集合的排列方式 可選值有flex-start(在主軸上(從start方向)從左或者上排列) flex-end(在主軸上從end方向)右或者下排列 center(在主軸上居中排列)
space-between 任何兩個相鄰 flexItem 項之間的間距是相同的，但不一定等於第一個/最後一個 flexItem 項與 flexItem 容器邊緣之間的間距;起始邊緣和第一個項目之間的間距和末端邊緣和最後一個項目之間的間距是相等的。
space-evenly flexContainer 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等。
space-around flexContainer 容器中的每個 flexItem 項的每一側間距都是相等的。請注意，這意味着兩個相鄰 flex 項之間的空間將是第一個/最後一個 flex 項與其最近邊緣之間的空間的兩倍。*/
/*align-items:baseline;*/
/* 以整個flexItem集合爲一個整體移動
flex-start 主軸方向從左到右或從上到下
flex-end 以主軸爲對稱軸平移至另一邊相同位置
center 以主軸爲參照，移動到距離主軸兩邊平行線相等的位置
stretch 默認值 如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
baseline flexITem的第一行文字的基線對齊
*/
/*align-content:stretch;*/
/*
當flexItem沒有超過一行或一列時,該屬性無法生效。
flex-start 主軸方向從左到右或從上到下
flex-end 將整個flexItem向主軸方向平移到另一端。
flex-center 以主軸爲參照，移動到距離主軸兩邊平行線相等的位置
space-between 任何兩個相鄰 flexItem 項之間的間距是相同的，但不一定等於第一個/最後一個 flexItem 項與 flexItem 容器邊緣之間的間距;起始邊緣和第一個項目之間的間距和末端邊緣和最後一個項目之間的間距是相等的。
space-around每個flexItem之間距離相等，第一和最後一個flexItem距離邊界的距離是flexItem之間的一半。
stretch 默認值 flexItems佔滿整個容器。
*/
/*flex-wrap:wrap-reverse;*/
/*
wrap 當一行或一列無法容納所有flexItem時，會將溢出的flexItem放到第二行或第二列(需要注意的是第二行或第二列位置會始終居於上一行和下面邊界的中間，也就是第二行的上外邊距與下外邊距始終相等)。
nowrap 溢出時，不換行，會採用默認處理行爲，flexContainer會將所有flexItem等比例縮小，以致可以完全放入一行或一列。
wrap-reverse align-items等於flex-end之後flex-wrap等於wrap行爲的結合
*/
}
.item{
width:100px;
height:100px;
border:solid 1px red;
/*
以下爲處於flexContainer中的flexItem可選屬性
order int類型 決定在flexItems中排列的位置，值越小，排列越靠前。默認0,(支持負值,不支持小數)。
flex-grow number類型 flexItem相對於其它flexItem的放大比例，前提是得有剩餘空間。默認0,(支持正整數，小數，值爲0的話，默認不放大，即使有空間，當然還是要受到容器默認對溢出處理的影響)
flex-shrink number類型 flexItem相對於其它flexItem的縮小比例，前提是空間不足的情況下，默認1(支持正整數，小數，值爲1的話，默認不縮小，即使空間不夠，當然還是要受到容器默認對溢出處理的影響)
flex-basis 設置主軸空間大小，上面的flex-grow和flex-shirink屬性就是依賴於主軸是否有剩餘空間來放大的或者主軸空間是否不足來設置的
flex flex-grow flex-shrink flex-basis 三者的結合屬性 參數也是該三項的值(默認值0,1,auto)
align-self 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
*/
}
</style>
<body>
<!-- flex conatiner -->
<div class="container">
<!-- flex item -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item" style="flex-shrink:0.5">4</div>
</div>
</body>
CSS3彈性佈局
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
https://stackoverflow.com/questions/419163/what-does-if-name-main-do
https://stackoverflow.com/questions/419163/what-does-if-name-main-do