HTML
又稱flexbox,是為了適應不同螢幕尺寸和顯示設備而生的佈局模式 (en-US)。 針對許多應用而言,不用 floats 的彈性盒子模型會比塊狀模型, 彈性容器的邊緣也不會與內容的邊緣重疊。 Example : <>div id="outerDiv"> <>div id="div1">1 <>/div> <>div id="div2">2 <>/div> <>div id="div3">3 <>/div> <>div id="div4">4 <>/div> <>div id="div5">5 <>/div> <>/div> #outerDiv div { display:inherit;flex:1; justify-content: center; align-items : center;font-size: 20px ; border: 1px solid black; } outerDiv { width: 100%; height:200px; border:3px solid; display:flex; flex-direction:row ; }
align-content:交錯軸為多行時的的整體對齊方式。 align-content 屬性 flex-start | center | flex-end | space-between | space-around | space-evenly
<style> #outside_DIV{ height: 250px;background: #def; display: flex; flex-wrap: wrap; align-content: stretch ; } </style> <div id="outside_DIV"> <div id="div1">01</div> <div id="div2">02</div> <div id="div3">03</div> <div id="div4">04</div> <div id="div5">05</div> </div>
在進入探討之前,先來簡單敘述一下這三者代表的是什麼,有些基本概念, 再來了解或許會比較好理解: align-self:交錯軸個別項目的對齊方式。 align-self屬性: stretch 預設 | flex-start | center | flex-end | baseline <style> #div1 { align-self: flex-start } #div2 { align-self: flex-end } #div3 { align-self: center } #div4 { align-self: stretch } #div5 { align-self: baseline } .outside_DIV{ display: flex ; height: 150px ; background: #def ; } </style>
align-items:當交錯軸只有一行時的對齊方式。 align-items 屬性: stretch 預設 | center | flex-start | flex-end | baseline <>div id="outside_DIV" > <>div id="item1">1<>/div> <>div id="item2">2<>/div> <>div id="item3">3<>/div> <>div id="item4">4<>/div> <>div id="item5">5<>/div> <>/div> #outside_DIV{ height: 200px ; width: 100%px; display: flex ; flex-wrap: wrap; background-color: #8c8c8c; } #outside_DIV div { width: 20%; display: flex; align-items: center; justify-content: stretch ; } align-items: stretch center flex-start flex-end baseline
<style> #div1 { order: 3 } #div2 { order: 1 } #div3 { order: 2 } #div4 { order: 5 } #div5 { order: 4 } </style>
Example : <>div class="Table"> <>div class="Tbody"> <>div class="Tr"> <>div class="td">123<>/div> <>div class="td">456<>/div> <>/div> <>div class="Tr"> <>div class="td">ABC<>/div> <>div class="td">DEF<>/div> <>/div> <>/div> <>/div> <>style> .Table { display:table;border-style:double} .Tbody { display:table-row-group} .Tr { display:table-row} .td { display:table-cell;border-style:double ; padding:0 10px} <>/style>
Example 1 <div class="Table"> <!-- similar <table>--> <div class="tr" > <!-- similar <tr>-----> <!-- similar <td> ------> <div class="td alignCenter verticalAlignTop" > text-align:center;<br>vertical-align:top;</div> <div class="td alignCenter verticalAlignMiddle"> text-align:center;<br>vertical-align:middle;</div> <div class="td alignCenter verticalAlignBottom"> text-align:center;<br>vertical-align: bottom;</div> </div> <div class="tr" > <!-- similar <tr>--> <!-- similar <td> ------> <div class="td alignLeft verticalAlignTop"> text-align:left;<br>vertical-align:top;</div> <div class="td alignCenter verticalAlignMiddle" > text-align: center;<br>vertical-align: middle;</div> <div class="td alignRight verticalAlignBottom " > text-align:right ;<br>vertical-align: bottom;</div> </div> </div> <style> .Table {display:table;width: 100%;font-size: 23px;} div {border: 1px solid #f00;} .tr {display:table-row;height: 200px; } .td {display:table-cell;width:33%;} .alignCenter {text-align:center;} .alignLeft {text-align:left;} .alignRight {text-align:right;} .verticalAlignTop {vertical-align:top;} .verticalAlignMiddle {vertical-align:middle;} .verticalAlignBottom {vertical-align:bottom;} </style>