✍ 📁 🙈 🙉 🙊 : display-table-table-cell :

display:table-cell || display:table-row || display:table-cell
text-align:left/center/right || vertical-align:top/middle/bottom

<div style="display:table-row;height: 200px;">
<div style="width:33%;border: 1px solid #f00;text-align:center;vertical-align:top;display:table-cell;">text-align:center;<br>vertical-align:top;</div>
 
<div style="width:33%;border: 1px solid #f00;text-align: center;vertical-align: middle;display: table-cell;height: 100%;">text-align: center;<br>vertical-align: middle;</div>
 
<div style="border: 1px solid #f00;text-align: center;vertical-align: bottom;display: table-cell;height: 100%;">text-align:center;<br>vertical-align: bottom;</div>
    </div>

<div style="display: table-row;height: 200px;">
<div style="width:33%;border: 1px solid #f00;text-align:left;vertical-align:top;display:table-cell;">text-align:left;<br>vertical-align:top;</div>
 
<div style="width:33%;border: 1px solid #f00;text-align: center;vertical-align: middle;display: table-cell;height: 100%;">text-align: center;<br>vertical-align: middle;</div>
 
<div style="border: 1px solid #f00;text-align:right ;vertical-align: bottom;display: table-cell;height: 100%;">text-align:right ;<br>vertical-align: bottom;</div>
    </div>

值	描述
display:table	顯示表格（類似 <table>）
display:table-row-group	行的分組（類似 <tbody>）
display:table-header-group	表格頭組（類似 <thead>）
display:table-footer-group	表格尾組（類似 <tfoot>）
display:table-row	表格換行（類似 <tr>）
display:table-column-group	列的分組（類似 <colgroup>）
display:table-column	格列顯示（類似 <col>）
display:table-cell	表格單元格（類似 <td> 和 <th>）
display:table-caption	表格標題（類似 <caption>）

#html #script #display:table-cell #display:table-row #display:table #text-align:right
#text-align:center #text-align:left #vertical-align:top #vertical-align:middle #vertical-align:bottom

display:flex || flex-direction:row || flex-direction:row-reverse
flex-direction:column || flex-direction:column-reverse || flex-direction:initial

.container input { position: absolute;
                   opacity: 0;    
                   cursor: pointer; }   
 .checkmark { position: absolute;
             top: 0;
             left: 0;
             height: 25px;
             width: 25px;
             background-color: #eee;
             border-radius: 50%; }

.container:hover input ~ .checkmark { background-color: #2196F3; }

.container input:checked~ .checkmark { background-color: red;  }

.checkmark:after { content: "";                              /* 圓中心點 */
                   position: absolute;
                   display: none; }

.container input:checked ~ .checkmark:after{display: block;} /* 圓中心點 */

.container .checkmark:after { top: 9px;                      /* 圓中心點 */
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius:50%;
                              background: white; }
</style> 
<label class="container">row
<input type="radio" name="radio" checked="checked"  value="row" onclick="Fflex(this)">  
<span class="checkmark"></span></label> |

<label class="container">row-reverse     
<input type="radio" name="radio"  value="row-reverse" onclick="Fflex(this)">  
<span class="checkmark"></span></label> |

<label class="container">column
<input type="radio" name="radio"  value="column" onclick="Fflex(this)">  
<span class="checkmark"></span></label> |

<label class="container">column-reverse
<input type="radio" name="radio"  value="column-reverse" onclick="Fflex(this)">  
<span class="checkmark"></span></label> | 
       
<label class="container" >initial
<input type="radio" name="radio" value="initial" onclick="Fflex(this)">  
<span class="checkmark"></span></label>

<div id="Ftxt">M-div{display:flex;flex-direction:row}</div>

Ftxt.innerHTML = "M-div{display:flex ; flex-direction: "+ x.value +"}" ;
}

</script>

值	描述
flex-direction	改變主軸顯示方向，水平反轉、轉為垂直、垂直反轉等
flex-direction:row	主軸從左至右
flex-direction:row-reverse	主軸從右至左
flex-direction:column	主軸由上至下
flex-direction:column-reverse	主軸由下至上
flex-direction: initial	最初的

#html #script #display:table-cell #display:table-row #display:table #text-align:right
#text-align:center #text-align:left #vertical-align:top #vertical-align:middle #vertical-align:bottom

display:flex || flex-direction:row || lex-direction:row-reverse
flex-direction:column || flex-direction:column-reverse || flex-direction:initial

<center><b>
<span style="font-size: 25px ;color:blue">
3 justify-content:flex-start / align-items:flex-start</<span> 
</b></center>

#flexA  div {
  background-color:pink;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px; }
</style>

<div id="flexA">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>  
</div>
     

<div id="Ftxt">M-div { display:flex ; justify-content : flex-start}</div>

<label class="container">flex-start
<input type="radio" name="radio" checked="checked"  value="flex-start" onclick="Fflex(this)">  
<span class="checkmark"></span></label> |

<label class="container">flex-end     
<input type="radio" name="radio"  value="flex-end" onclick="Fflex(this)">  
<span class="checkmark"></span></label> |

<label class="container">center
<input type="radio" name="radio"  value="center" onclick="Fflex(this)">  
<span class="checkmark"></span></label> |

<label class="container">space-between
<input type="radio" name="radio"  value="space-between" onclick="Fflex(this)">  
<span class="checkmark"></span></label> | 
       
<label class="container" >space-around
<input type="radio" name="radio" value="space-around" onclick="Fflex(this)">  
<span class="checkmark"></span></label>

<label class="container" >initial
<input type="radio" name="radio" value="initial" onclick="Fflex(this)">  
<span class="checkmark"></span></label><br><br><br>

<div id="Fttt">M-div { display:flex ; align-items : flex-start}</div>

<label class="container">flex-start
<input type="radio" name="radiob" checked="checked"  value="flex-start" onclick="Falign(this)">  
<span class="checkmark"></span></label> |

<label class="container">flex-end     
<input type="radio" name="radiob"  value="flex-end" onclick="Falign(this)">  
<span class="checkmark"></span></label> |

<label class="container">center
<input type="radio" name="radiob"  value="center" onclick="Falign(this)">  
<span class="checkmark"></span></label> |

<label class="container">stretch
<input type="radio" name="radiob"  value="stretch" onclick="Falign(this)">  
<span class="checkmark"></span></label> |

<label class="container" >initial
<input type="radio" name="radiob" value="initial" onclick="Falign(this)">  
<span class="checkmark"></span></label>
<br><br><br>

function Falign(x) {
//alert(x.value);
flexA.style.alignItems = x.value;
Fttt.innerHTML = "M-div { display:flex ; align-items : "+ x.value +"}" ;
}

</script>

.container:hover input ~ .checkmark { background-color: #2196F3; }

.container input:checked~ .checkmark { background-color: red;  }

.checkmark:after { content: "";                              /* 圓中心點 */
                   position: absolute;
                   display: none; }

.container input:checked ~ .checkmark:after{display: block;} /* 圓中心點 */

.container .checkmark:after { top: 9px;                      /* 圓中心點 */
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius:50%;
                              background: white; }

#Ftxt , #Fttt {font-size:25px;color:red;font-weight : bold ;}
                             
</style>

Edit

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單