✍ 📁 🙈 🙉 🙊 : CSS display flex align-content

<pre> <t1>CCS align-content 屬性介紹</t1>
      不對齊彈性項目，而是對齊彈性線 （垂直）。
 屬性 : center              置中對齊
       flex-start          靠上對齊
       flex-end            靠下對齊
       space-between       均勻上下分布 
       space-around        均勻分散上下對齊( 上下邊 間距一半）
       space-evenly        均勻分散上下對齊
       start               靠上對齊
       end                 靠下對齊
       baseline            對齊 flex 基準線
       first baseline;
       last baseline
       stretch           撐滿對齊     
       initial           繼承 
       inherit           最初的
       normal            設置對齊
      safe center        安全的 置中對齊
      unsafe center      不安全 置中對齊

<t1> CCS flex-wrap 屬性介紹</t1>
 flex-wrap 屬性規定flex容器是單行或者多行，
 同時橫軸的方向決定了新行堆疊的方向。
 屬性 : nowrap	      默認值。規定靈活的項目不拆行或不拆列。
        wrap	      規定靈活的項目在必要的時候拆行或拆列。
        wrap-reverse 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。
        initial      設置該屬性為它的默認值。請參閱 initial 。
        inherit      從父元素繼承該屬性。請參閱 inherit 。
</pre>
<style>
pre {font-size: 18px ;}
t1{font-size: 30px;color : blue;font-weight : bold;}
r {color : red}
</style>

<style>

img  {width:auto; 
      border: 5px solid snow;  
      margin:5px;    }

#sel , #sel select  {font-size: 20px ;}
  
#main { display:flex;
        width: 100% ;
        height: 500px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-wrap: wrap;
        align-content: center ;
        border:1px solid black; }

}
</style>
<div id="sel">
flex-wrap :
<select onchange="main.style.flexWrap= this.value">
    <option value="wrap"     > wrap</option>
    <option value="nowrap" >nowrap</option>
    <option value="wrap-reverse"   > wrap-reverse</option>
    <option value="initial"       >  initial</option>
    <option value="inherit" >inherit</option>
</select>
<br>
	
align-content :
<select onchange="main.style.alignContent= this.value">

<option value="center"     > center     </option>
    <option value="flex-start" >flex-start</option>
    <option value="flex-end"   > flex-end</option>
    <option value="space-between"       >  space-between</option>
    <option value="space-around" >space-around</option>
    <option value="space-evenly"   > space-evenly</option>
    <option></option>
    <option value="start"    >  start    </option>
    <option value=" end"       >  end       </option>

<option value="baseline"       >  baseline</option>
    <option value="first baseline" >first baseline</option>
    <option value="last baseline"   > last baseline</option>

<option value="stretch"   > stretch</option>
    <option value="initial"   > initial </option>
    <option value="inherit"   > inherit</option>
    <option value="normal"   > normal</option>
    <option value="safe center"   > safe center</option>
    <option value="unsafe center"   > unsafe center</option>

</select> </div><br>

</div>

Edit

#html #style #script #javascript #CSS #auto #stretch #align-self #center #initial #inherit #flex-start #flex-end #baseline #css 位置 #css center #flex-wrap () #擠壓對齊掛列 img

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

align-content

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

align-content

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單