✍ 📁 🙈 🙉 🙊 : 標簽 <div>

<h3>div display : flex </h3>

<pre> 又稱flexbox，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式 (en-US)。
 針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型，
 彈性容器的邊緣也不會與內容的邊緣重疊。

Example :
 <<?>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>

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

outerDiv { width: 100%; height:200px;
            border:3px solid;
            display:flex;
            flex-direction:<span id="DP">row</span> ; }

</pre>

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

#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">
<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>
</select>

<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>
  <br><br>
</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.display="flex";
outerDiv.style.flexDirection="row";

window.addEventListener( "change", DDP)

function DDP() {
DP.innerHTML =outerDiv.style.flexDirection; }

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

<b>display:flex + align-content: stretch; </b>

<select onchange="outside_DIV.style.alignContent= this.value;
                   DP1.innerHTML=outside_DIV.style.alignContent">
    <option value="stretch"       >stretch </option>
    <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 value="initial"       > initial </option>
    <option value="inherit "      > inherit </option>
</select>

#outside_DIV div { text-align: center;
	           background: gray;
	           border: 1px solid black;
	           color: white;
	           padding: 0.5em;
	           box-sizing: border-box;
	           flex-basis: 33%; }
</style>
Example
<div id="outside_DIV">
      <div id="div1">01</div>
      <div id="div2">02</div>
      <div id="div3">03</div>
      <div id="div4">04</div>
      <div id="div5">05</div>
</div>

<pre>
<<c>style>
#outside_DIV{ height: 250px;background: #def;
              display: flex; 
              flex-wrap: wrap;
              <r>align-content: <span id="DP1">stretch</span> ;</r>  }
<</c>/style>
<</c>div id="outside_DIV">
      <</c>div id="div1">01<</c>/div>
      <</c>div id="div2">02<</c>/div>
      <</c>div id="div3">03<</c>/div>
      <</c>div id="div4">04<</c>/div>
      <</c>div id="div5">05<</c>/div>
<</c>/div></pre>

<style>

select  {font-size: 20px ;}

b{font-size:25px;color:blue;} 
r{font-size:20px;color:red;}
b{font-size:25px;color:blue;}
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>

<h3>display:flex  align-self:flex-start</h3>
<pre> 在進入探討之前，先來簡單敘述一下這三者代表的是什麼，有些基本概念，
      再來了解或許會比較好理解：

align-self：交錯軸個別項目的對齊方式。
 align-self屬性：
 stretch 預設 | flex-start | center | flex-end | baseline

<<c>style>
     #div1 { align-self: flex-start }
     #div2 { align-self: flex-end   }
     #div3 { align-self: center     }
     #div4 { align-self: stretch    }
     #div5 { align-self: baseline   }

.outside_DIV{ <r>display: flex ;</r> 
                  height: 150px ;
                  background: #def ; }

<<c>/style>

</pre>

<div class="outside_DIV">
<div id="div1">div1<br>flex-start</div>
<div id="div2">div2<br>flex-end</div>
<div id="div3">div3<br>center</div>
<div id="div4">div4<br>stretch</div>
<div id="div5">div5<br>baseline</div>
</div>

.outside_DIV div {text-align: center;
	      background: gray;
	      border: 1px solid black;
	      color: white;
	      padding: 0.5em;
	      box-sizing: border-box;
	      flex-basis: 20%; }

b{font-size:25px;color:blue;} 
r{color:red;}
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;   }    /* Internet Explorer 5.5+ */
h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }

</style>

<h3>display:flex  align-items</h3>
<pre> align-items：當交錯軸只有一行時的對齊方式。
 align-items 屬性：
 stretch 預設 | center | flex-start | flex-end | baseline

<<?>div id="outside_DIV" >
      <<?>div id="item1">1<<?>/div>
      <<?>div id="item2">2<<?>/div>
      <<?>div id="item3">3<<?>/div>
      <<?>div id="item4">4<<?>/div>
      <<?>div id="item5">5<<?>/div>
<<?>/div>

#outside_DIV{ height: 200px ; width: 100%px;  
              display: flex ; flex-wrap: wrap;
              background-color: #8c8c8c; }

#outside_DIV div { width: 20%;
                   display: flex;
                   align-items: center;
                   justify-content: <r><span id="dd">stretch</span> </r>; }

align-items: <select id="values" >
    <option value="stretch">stretch</option>
    <option value="center" >center</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="baseline">baseline</option>
  </select>
</pre>

<SCRIPT>
var values = document.getElementById("values");
values.addEventListener("change", (evt) => {
  outside_DIV.style.alignItems = evt.target.value;
  dd.innerHTML = evt.target.value });
</SCRIPT>

#outside_DIV div { width: 20% ; display: flex;
                   justify-content: center;
                   align-items: stretch; }

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

select {font-size: 20px}

r{font-size:20px;color:red;}

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;   }    /* Internet Explorer 5.5+ */
h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }

</style>

<h3>display:flex + order </h3>
<div class="outside_DIV">
<div id="div1">div1<br>flex-start</div>
<div id="div2">div2<br>flex-end</div>
<div id="div3">div3<br>center</div>
<div id="div4">div4<br>stretch</div>
<div id="div5">div5<br>baseline</div>
</div>

<pre>
<<c>style>
#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }
<<c>/style>
</pre>

#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }

.outside_DIV div {text-align: center;
	      background: gray;
	      border: 1px solid black;
	      color: white;
	      padding: 0.5em;
	      box-sizing: border-box;
	      flex-basis: 20%; }

b{font-size:25px;color:blue;} 
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

<sel>
CSS main div { justify-content :
<select onchange="mainDIV.style.justifyContent=this.value;DDP() ">
   <option value="center"  > center  </option>
   <option value="start"   > start   </option>
   <option value="end"     > end     </option>

<option value="flex-start" > flex-start     </option>
   <option value="flex-end"   > flex-end </option>
   <option value="left"       > left</option>
   <option value="right"      > right</option>

<option  value="space-between" > space-between  </option>
   <option value="space-around"   > space-around   </option>
   <option value="space-evenly"   > space-evenly   </option>
   <option value="stretch"        > stretch        </option>

<option value="inherit"        > inherit      </option>
   <option value="initial"        > initial      </option>
   <option value="revert"         > revert       </option>
   <option value="revert-layer"   > revert-layer </option>
   <option value="unset"          > unset        </option>

</select> ; } <br>

CSS main div { align-items :
<select onchange="mainDIV.style.alignItems=this.value;DDP() ">
   <option value="center"     > center     </option>
   <option value="flex-start" > flex-start </option>
   <option value="flex-end"   > flex-end   </option>
   <option value="stretch"    > stretch    </option>
   <option value="baseline"   > baseline   </option>
   <option value="initial"    > initial    </option>
 </select> ; }
<br>

CSS main div { flex-direction :
<select onchange="mainDIV.style.flexDirection =this.value;DDP() ">
   <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> ; }
</sel>

#mainDIV {height:500px;width:100%;
          background-color: linen;
          display: flex;
          justify-content: center ;
          flex-flow: row;
          align-items: center ; 
          flex-direction :row  }

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

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

</style>

} DDP( );</script>

Edit

#html #style #script #javascript #CSS #display flex #display inherit #justify-content center #align-items center #align-content stretch #CSS #align-self flex-start #align-self flex-end #align-self center #align-self stretch #align-self baseline

<h3>display:table</h3>

<table border="1" style="width: 100%;font-size: 20px"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組  類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column 
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>

<pre><b>Example :</b>
<<?>div class="Table">
   <<?>div class="Tbody">
      <<?>div class="Tr">
         <<?>div class="td">123<<?>/div>
         <<?>div class="td">456<<?>/div>
      <<?>/div> 
      <<?>div class="Tr">
         <<?>div class="td">ABC<<?>/div>
         <<?>div class="td">DEF<<?>/div>
      <<?>/div> 
   <<?>/div>
<<?>/div>

<<?>style>
  .Table { display:table;border-style:double}
  .Tbody { display:table-row-group}
  .Tr { display:table-row}
  .td { display:table-cell;border-style:double ;
        padding:0 10px}
<<?>/style>
</pre>

</div>
</div>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

input HTML

<table border="1" style="width: 100%;"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組  類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column 
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>

<pre><b>Example 1</b>
 <<c>div class="Table"> <<c>!-- similar <<c>table>-->
      <<c>div class="tr" >   <<c>!-- similar <<c>tr>----->
           <<c>!-- similar <<c>td> ------>
           <<c>div class="td alignCenter verticalAlignTop" >
           text-align:center;<<c>br>vertical-align:top;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignMiddle">
          text-align:center;<<c>br>vertical-align:middle;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignBottom">
          text-align:center;<<c>br>vertical-align: bottom;<<c>/div>
      <<c>/div>

<<c>div class="tr" >  <<c>!-- similar <<c>tr>-->
          <<c>!-- similar <<c>td> ------>
          <<c>div class="td alignLeft verticalAlignTop">
          text-align:left;<<c>br>vertical-align:top;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignMiddle" >
          text-align: center;<<c>br>vertical-align: middle;<<c>/div>
 
          <<c>div  class="td alignRight verticalAlignBottom " >
          text-align:right ;<<c>br>vertical-align: bottom;<<c>/div>
      <<c>/div>
<<c>/div>
<<c>style>
.Table {display:table;width: 100%;font-size: 23px;}
div    {border: 1px solid #f00;}
.tr    {display:table-row;height: 200px; }
.td    {display:table-cell;width:33%;}
.alignCenter  {text-align:center;}
.alignLeft    {text-align:left;}
.alignRight   {text-align:right;}

.verticalAlignTop    {vertical-align:top;}
.verticalAlignMiddle {vertical-align:middle;}
.verticalAlignBottom {vertical-align:bottom;}
<<c>/style>

</pre>
<style> 
td {padding-left:10px}

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

Edit

#ccs #HTML #blogger #字型樣式 #Font style

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

flex direction

css display table

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

flex direction

css display table

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單