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

<div style="width: 100%; height:400px;display: flex;
            display:flex ; justify-content: center;
            align-items : center; border: 3px solid;">
<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></div>
<div id="out">id=outerDiv</div>

#sel , #sel select  {font-size: 20px ;}
#outerDiv{ width: 40%; height:200px;
           border: 3px solid;
           display: flex;
           flex-direction: row; 
           flex-wrap: nowrap        }

#outerDiv div { display:inherit;flex:1;
                justify-content: center;
                align-items : center;font-size: 20px ;
                border: 1px solid black; }
}	
</style>

<table border="1" width="100%"><tbody>
<tr><td>	
<div id="sel">
outerDiv.display :
<select onchange="outerDiv.style.display = this.value">
    <option value="flex" >flex</option>
    <option value="initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br>
	
outerDiv.flex-direction :
<select onchange="outerDiv.style.flexDirection= this.value">
    <option value="row"     > row</option>
    <option value="row-reverse" >row-reverse</option>
    <option value="column"   > column</option>
    <option value="column-reverse"    >  column-reverse</option>
    <option value=" initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br> 
outerDiv.flex-wrap :
<select onchange="outerDiv.style.flexWrap= this.value">
    <option value="nowrap"     > nowrap</option>
    <option value="wrap" >wrap</option>
    <option value="wrap-reverse"   > wrap-reverse</option>
    <option value=" initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br><br> 
innerDiv.flex:
<select onchange="Fff(this.value)">
    <option value="1" > 1</option>
    <option value="0" >0</option>
</select>
<br>
innerDiv div quantity
<select onchange="Dq(this.value)">
    <option value="5" >5</option>
    <option value="3" >3</option>
    <option value="1" >1</option>
</select>

</td><td><pre><div id="DP"></div></pre>
</td></tr></tbody></table>

if(x == 1){ div2.style.display="none" ;
            div3.style.display="none" ;
            div4.style.display="none" ;
            div5.style.display="none" ;}

if(x == 3){ div4.style.display="none" ;
            div5.style.display="none" ;}

}

function Fff(x){
div1.style.flex = x;
div2.style.flex = x;
div3.style.flex = x;
div4.style.flex = x;
div5.style.flex = x;
}

outerDiv.style.flexDirection="row";
outerDiv.style.flexWrap="nowrap";
window.addEventListener( "change", DDP)
function DDP() {
var tx="<font size=4> outerDivdiv CSS<br>" ;
tx += " width:60%; height:300px ;<br>" ;
tx += " border:3px solid;<br>" ;
tx += " display:flex <br>" ; 
tx += " flex-direction:"+ outerDiv.style.flexDirection+" ;<br>" ;
tx += " flex-wrap: "+ outerDiv.style.flexWrap +" ;  " ;
DP.innerHTML =tx;
//alert()
}

function divD(x , c) {
x.style.display="flex";
if(c.checked) {x.style.display="none";} 
}
DDP();
</script>

ul {list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li { padding:2px;
  height: 100px;
  flex-grow: 58;
}

li:last-child {
  // There's no science in using "10" here. In all my testing, this delivered the best results.
  flex-grow: 60;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

</style>

Edit

#html #style #script #javascript #CSS

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

flex-flow flex-direction flex-wrap

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

flex-flow flex-direction flex-wrap

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單