✍ 📁 🙈 🙉 🙊 : CSS display flex

顯示具有 CSS display flex 標籤的文章。顯示所有文章

CCS flex-flow column row

<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>

div123 { height: 40%;
         margin: 0;
         padding: 0;
         display: flex;
         flex-flow: column;  }

header { display: block;
         margin: 4px;
         padding: 5px;
         height: 20%;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: #ffeebb;    }

footer { display: block;
         margin: 4px;
         padding: 5px;
         height: 100%;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: #ffeebb;    }

#div1{ width:98% ; margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: #dddd88;
        flex: 0 1 100%;
        order: 1;    }
 
 #div2{ width:98% ; margin: 4px;
        padding: 2px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 0 1 100%;
        order: 2;    }

#div3{ width:98%  ; margin: 4px;
         padding: 2px;
         border: 1px solid #8888bb;
         border-radius: 7pt;
         background: #DAA520 ;
         flex: 0 1 100%;
         order: 3;    }

#inChange{ position: fixed;
           top:45% ; left:150px}
</style>

<Mdiv id="Mdiv" >
    <header id="header">header</header>
        <div123 id="div123">
                  <div1 id="div1">div1</div1>
                  <div2 id="div2">div2</div2>
                  <div3 id="div3">div3</div3>
         </div123>
    <footer>footer <br>

Mdiv flex-flow :<label class="container"><input type="radio" name="MdivFlow"  checked="checked" onchange="Mdiv.style.flexFlow='column'" >column</label>
<label class="container">
<input type="radio" name="MdivFlow"  onchange="Mdiv.style.flexFlow='column-reverse'">column-reverse</label>
<br><br>

header display :
<label class="container">
<input type="radio" name="S1" 
onchange="header.style.display='block'" checked="checked">block</label>
<label class="container">
<input type="radio" name="S1" value="header display none" onchange="header.style.display='none'">none</label>
<br><br>

div1 display :
<label class="container">
<input type="radio" name="S2" checked="checked" onchange="div1.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="S2" value="div1 display none" onchange="div1.style.display='none'">none</label>
<br>

div2 display :
<label class="container">
<input type="radio" name="d2" checked="checked" onchange="div2.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="d2" value="div2 display none" onchange="div2.style.display='none'">none</label>
<br>

div3 display :
<label class="container">
<input type="radio" name="d3" checked="checked" onchange="div3.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="d3" value="div3 display none" onchange="div3.style.display='none'">none</label>
<br><br>

div123 display :
<label class="container">
<input type="radio" name="d4" value="div123 display inherit" onchange="div123.style.display='inherit'" checked="checked">inherit</label>
<label class="container">
<input type="radio" name="d4" value="div123 display none" onchange="div123.style.display='none'">none</label>
<br>

div123 flex-flow :
<label class="container">
<input type="radio" name="d5" checked="checked" onchange="div123.style.flexFlow='column'" >column</label>
<label class="container">
<input type="radio" name="d5"  onchange="div123.style.flexFlow='column-reverse'">column-reverse</label>
<br>

div123 flex-flow :
<label class="container">
<input type="radio" name="d5" checked="checked" onchange="div123.style.flexFlow='row'" >row</label>
<label class="container">
<input type="radio" name="d5"  onchange="div123.style.flexFlow='row-reverse'">row-reverse</label>
<br>
</div>

</footer>

Edit

#html #style #script #javascript #CCS flex-flow #flex-flow column #flex-flow row #display #display flex #flex

css flex-flow

<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 #改變比例

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 測試左單右單

CCS flex-flow column row

css flex-flow

align-content

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

CCS flex-flow column row

css flex-flow

align-content

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單