✍ 📁 🙈 🙉 🙊 : CSS display 標簽區塊 @ div,

CSS display 屬性

CSS display 屬性 : 設定網頁元素的顯示類型，HTML 元素本身的顯示類型就是預設的，而且每一種不同的元素都會有自己的預設值，常見的顯示類型有「區塊元素」與「內行元素」。
display:block display:none

值	描述
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 屬性的值。

<center><b>
<span style="font-size: 25px ;color:blue">2 flex-direction:row</<span> 
</b></center>

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

<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>
     
<style> 
.container { //display: block;
             position: relative;
             padding-left: 30px;
             margin: 0px 15px ;
             cursor: pointer;
             font-size: 20px;     }

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

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

</script>

#CSS display #CSS 標簽區塊 #html標簽區塊 #CSS div #html div

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單