CSS flex-direction

<pre><t1>CCS flex-direction 屬性介紹</t1> 属性指定了内部元素是如何在 flex 容器中布局的， 定义了主轴的方向(正方向或反方向)。 <table border="1"><tbody> <tr><td>row </td><td>默認值。水平顯示，正如一個行一樣 </td></tr> <tr><td>row-reverse </td><td>與 row 相同，但是以相反的順序 </td></tr> <tr><td>column </td><td>垂直顯示，正如一個列一樣 </td></tr> <tr><td>column-reverse </td><td>與 column 相同，但是以相反的順序</td></tr> <tr><td>initial </td><td>設置該屬性為它的默認值 </td></tr> <tr><td>inherit </td><td>從父元素繼承該屬性</td></tr> <tbody></table> flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性。 flex-direction 屬性規定靈活項目的方向。 flex-wrap 屬性規定靈活項目是否拆行或拆列。 flex-grow：伸展比 flex-shrink：收縮比 flex-basis：絕對值 </pre> <style> pre ,table {font-size: 20px ;} td {padding:0 10px 0 10px} t1{font-size: 30px;color : blue;font-weight : bold;} r {color : red} </style>

00

<style> #main{ width: 100% ; height: 100% ; display: flex; justify-content : center; align-items : center } #DPid { position: fixed;top:300px ; left:250px; background-color: #a5def5; width: 240px; height: 240px; display: flex; flex-wrap: wrap; /*wrap|nowrap|wrap-reverse*/ justify-content : center ; flex-direction : row; } .item{ width: 50px; height: 40px; font-size: 40px ; color: white; background-color: #00A0E9; margin: 10px; display:flex ; justify-content: center; align-items : center; } #inputdiv { position: fixed;top:20px ; left:5px; } #inputdiv table {font-size: 20px;} </style> <div id="inputdiv"> <table><tbody> <tr><td>flex-direction : </td><td><label> <input type="radio" name="flexDirection" checked="checked" onchange="DPid.style.flexDirection='row'" >row</label> </td><td><label> <input type="radio" name="flexDirection" name="flexFlow" onchange="DPid.style.flexDirection='row-reverse'">row-reverse</label> </td><td><label> <input type="radio" name="flexDirection" name="flexFlow" onchange="DPid.style.flexDirection='column'">column</label> </td><td><label> <input type="radio" name="flexDirection" name="flexFlow" onchange="DPid.style.flexDirection='column-reverse'">column-reverse</label> </td></tr></tbody></table> <br> <table><tbody> <tr><td> flex-wrap : </td><td><label> <input type="radio" name="flex-wrap" checked="checked" onchange="DPid.style.flexWrap='wrap'" >wrap</label> </td><td><label> <input type="radio" name="flex-wrap" onchange="DPid.style.flexWrap='nowrap'" >nowrap</label> </td><td><label> <input type="radio" name="flex-wrap" onchange="DPid.style.flexWrap='wrap-reverse'" >wrap-reverse</label> </td></tr></tbody></table> <br> <table><tbody> <tr><td width="130px">justify-content : </td><td><label> <input type="radio" name="flexFlow" checked="checked" onchange="DPid.style.justifyContent='center'" >center</label> </td><td><label> <input type="radio" name="flexFlow" onchange="DPid.style.justifyContent='start'" >start</label> </td><td><label> <input type="radio" name="flexFlow" onchange="DPid.style.justifyContent='end'" >end</label> </td><td><label> <input type="radio" name="flexFlow" onchange="DPid.style.justifyContent='left'" >left</label> </td><td><label> <input type="radio" name="flexFlow" name="flexFlow" onchange="DPid.style.justifyContent='right'">right</label> </td></tr></tbody></table> <table><tbody> <tr><td width="130px" > </td> </td><td><label> <input type="radio" name="flexFlow" onchange="DPid.style.justifyContent='flex-start'" >flex-start</label> </td><td><label> <input type="radio" name="flexFlow" name="flexFlow" onchange="DPid.style.justifyContent='flex-end'">flex-end</label> </td></tr></tbody></table> <table><tbody> <tr><td width="130px" > </td> </td><td><label> <input type="radio" name="flexFlow" onchange="DPid.style.justifyContent='space-between'" >space-between</label> </td><td><label> <input type="radio" name="flexFlow" name="flexFlow" onchange="DPid.style.justifyContent='space-around'">space-around</label> </td><td><label> <input type="radio" name="flexFlow" name="flexFlow" onchange="DPid.style.justifyContent='space-evenly'">space-evenly</label> </td></tr></tbody></tbody> </div> <div id="DPid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>

00

Edit

#html #style #script #javascript #CSS #CSS flex-direction #flex-direction #justifyContent #row-reverse #flex-flow #column #column-reverse #flex-direction #flex-wrap #space-between #flex-grow #flex-shrink #flex-basis #排列對齊 #flex-start