✍ 📁 🙈 🙉 🙊

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

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

flex-wrap 屬性介紹

Edit

#flex-wrap #flex-wrap () #擠壓對齊掛列 img #擠壓對齊掛列 div #script javascript #javascript #wrap #wrap-reverse #nowrap #html #img

CSS display 屬性

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline	默認。此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	CSS 中有值compact，不過由於缺乏廣泛支持，已經從CSS2.1 中刪除。
marker	CSS 中有值marker，不過由於缺乏廣泛支持，已經從CSS2.1 中刪除。
table	此元素會作為塊級表格來顯示（類似<table>），表格前後帶有換行符。
inline-table	此元素會作為內聯表格來顯示（類似<table>），表格前後沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似<tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似<thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似<tfoot>）。
table-row	此元素會作為一個表格行顯示（類似<tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似<colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似<col>）
table-cell	此元素會作為一個表格單元格顯示（類似<td> 和<th>）
table-caption	此元素會作為一個表格標題顯示（類似<caption>）
inherit	規定應該從父元素繼承display 屬性的值。

Edit

iframe youtube 常用屬性 Commonly used Attributes

   youtube 重複播放 [autoplay + loop + playlist Attributes]
   自動播放 autoplay=1 
   重複播放 loop=1
   播放列表 playlist=影片ID 
   本片ID   i1_02Myn3Pg
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&loop=1&playlist=i1_02Myn3Pg

   youtube 不顯影片完結推廣 [rel=0 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0

   youtube 不顯示播放器控制選項 [controls=0 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0&controls=0

   youtube  靜音 [mute=1 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0&mute=1

前往 YouTube 嵌入式播放器及播放器参数網頁

Edit

#youtube #iframe youtube #youtube 常用屬性 #youtube Attributes #youtube 自動播放 #youtube 播放列表 #youtube 重複播放 #youtube autoplay #youtube loop #youtube autoplay #youtube rel

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

css flex-flow

align-content

flex-wrap 屬性介紹

CSS display 屬性

CSS display 屬性

iframe youtube 常用屬性 Commonly used Attributes

iframe youtube 常用屬性 Commonly used Attributes

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

css flex-flow

align-content

flex-wrap 屬性介紹

CSS display 屬性

CSS display 屬性

iframe youtube 常用屬性 Commonly used Attributes

iframe youtube 常用屬性 Commonly used Attributes

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單