✍ 📁 🙈 🙉 🙊 : CSS display flex flex-flow

<pre><t1>CCS flex-flow 屬性介紹</t1>
   內容物會依照交錯軸線排列成一行。
<table border="1"><tbody>
<tr><td>column      </td><td> 縱行</td></tr>
<tr><td>row        </td><td>  列行</td></tr>
<tr><td>row nowrap  </td><td>列行換行</td></tr>
<tr><td>row-reverse nowrap </td><td>列行反向 不換行</td></tr>
<tr><td>column-reverse  nowrap </td><td>縱行反向 不換行</td></tr>
<tr><td>row wrap </td><td>  列行 換行</td></tr>
<tr><td>row-reverse wrap </td><td> 列行反向 換行</td></tr>
<tr><td>column wrap      </td><td>  縱行 換行</td></tr>
<tr><td>column-reverse wrap</td><td> 縱行反向 換行</td></tr>
<tr><td>row wrap-reverse  </td><td>  列行 反向換行</td></tr>
<tr><td>row-reverse wrap-reverse</td><td>  列行反向 反向換行</td></tr>
<tr><td>column wrap-reverse</td><td> 縱行 反向換行</td></tr>
<tr><td>column-reverse wrap-reverse</td><td> 縱行反向 反向換行</td></tr>
<tbody></table>
  flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性。
  flex-flow 屬性用於設置或檢索彈性盒模型對像的子元素排列方式。
  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>

<sel>
CSS div { flex-flow :
<select onchange="mainDIV.style.flexFlow=this.value;DDP() ">
    <option value="column" > column  </option>
    <option value="row" > row </option>
    <option value="row nowrap" >row nowrap;</option>
    <option value="row-reverse nowrap" > row-reverse nowrap</option>
    <option value="column-reverse nowrap" >column-reverse nowrap</option>
    <option value="row wrap" >row wrap</option>
    <option value="row-reverse wrap" >row-reverse wrap</option>
    <option value="column wrap" >column wrap</option>
    <option value="column-reverse wrap" >column-reverse wrap</option>
    <option value="row wrap-reverse" >row wrap-reverse</option>
    <option value="row-reverse wrap-reverse" >row-reverse wrap-reverse</option>
    <option value="column wrap-reverse" > column wrap-reverse</option>
    <option value="column-reverse wrap-reverse" >column-reverse wrap-reverse</option>

</select> ; } </sel><br>

#mainDIV {height:600px;width:100%;
          background-color: DodgerBlue;
          display: flex;
          flex-flow:column;}

#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9 {
  width:70px;
  background-color:pink;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px; 
  display:flex ; 
  justify-content:center;
  align-items : center; }
 
 #div1{height:40px;order: 1 }
 #div2{height:60px;order: 2}
 #div3{height:80px;order: 3}
 #div4{height:100px;order: 4}
 #div5{height:120px;order: 5}
 #div6{height:140px;order: 6}
 #div7{height:160px;order: 7}
 #div8{height:180px;order: 8}
 #div9{height:180px;order: 9}

#pp {  font-size: 30px; 
position: fixed;
top:40% ; left:150px
}

</style>

Edit

#html #style #script #javascript #CSS #flex Order #CSS flex Order #flex: initial #flex: auto #flex: none #flex: 1 #flex: 1 1 auto #改變比例

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

css flex-flow

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

css flex-flow

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單