✍ 📁 🙈 🙉 🙊

CSS justify-content

<pre><t1>    CSS  justify-content 屬性介紹</t1>
      內容物會依照交錯軸線排列成一行。
<table border="1"><tbody>
<tr><th>  屬性 </th><th> 描述 </th></tr>
<tr><td> center     </td><td> 置中對齊 </td></tr>
<tr><td> start      </td><td>對齊主軸線最前端 </td></tr>
<tr><td> end        </td><td> 對齊主軸線最終端 </td></tr>

<tr><td> flex-start </td><td> 靠左對齊 </td></tr>
<tr><td> flex-end   </td><td> 靠右對齊 </td></tr>
<tr><td> left       </td><td> 從左邊位置開始排列 </td></tr>
<tr><td> right      </td><td> 從右邊位置開始排列 </td></tr>

<tr><td> space-between </td><td> 分散對齊  </td></tr>
<tr><td> space-around  </td><td> 分散對齊( 左右邊 間距一半） </td></tr>
<tr><td> space-evenly  </td><td> 均分對齊（左右邊 間距一致） </td></tr>
<tr><td> stretch       </td><td> 均勻排列每個元素</td></tr>

<tr><td> inherit      </td><td>繼承</td></tr>
<tr><td> initial     </td><td> 最初的</td></tr>
<tr><td> revert       </td><td>恢復</td></tr>
<tr><td> revert-layer </td><td>還原層</td></tr>
<tr><td> unset        </td><td>取消设定</td></tr>
<tbody></table>

<t1>    CSS  flex-direction 屬性介紹</t1>
     這個屬性是用來控制主軸方向，預設值為由左到右
<table border="1"><tbody>
<tr><th> 屬性 </th><th> 描述 </th></tr>
<tr><td> row            </td><td>水平顯示      </td></tr>
<tr><td> row-reverse    </td><td>水平顯示 逆轉 </td></tr>
<tr><td> column         </td><td>垂直顯示      </td></tr>
<tr><td> column-reverse </td><td>垂直顯示 逆轉 </td></tr>
<tr><td> initial        </td><td>最初的       </td></tr>
<tr><td> inherit        </td><td>繼承         </td></tr>
<tbody></table>
</pre>
<style>
pre ,table  {font-size: 20px ;}
td , th {padding:0 10px 0 10px}
t1{font-size: 30px;color : blue;font-weight : bold;}
r {color : red}
</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 div #style #script #javascript #CSS #flex Order #CSS flex Order #flex: initial #flex: auto #flex: none #flex: 1 #flex: 1 1 auto #改變比例 #改變比例 #CSS align-items #CSS flex-direction #CSS justify-content #row #column #row-reverse #column-reverse #flex #baseline

CSS order

#div1 { width:300px; height:100px;
        background-color:coral;  
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: antiquewhite;
        order:1 }

#div2 { width:400px; height:150px;
        background-color:#8888bb;
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: pink;
        order:2 }
	
#div3 { width:600px; height:200px;
        background-color:coral; 
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: wheat;
        order:3}
	
#main{  display:flex;
        flex-flow:row ; //column ;		
	align-items:flex-end ;
       	width:100%;
	height:300px;
	border:1px solid black;		}

#main div{flex: 1;}	
</style>

<div class="sel">			
CSS div { order :
<select onchange="Order(this)">
    <option value="1 2 3" > ▃ ▅ ▇ </option>
    <option value="2 1 3" > ▅ ▃ ▇</option>
    <option value="3 1 2" > ▇ ▃ ▅ </option>
    <option value="1 3 2" > ▃ ▇ ▅ </option>
    <option value="3 2 1" > ▇ ▅ ▃ </option>
</select> ; } <br>

CSS div { flex :
<select onchange="Order(this)">
    <option value="a" >   auto </option>
    <option value="n" >   none</option>
    <option value="i" >   initial </option>
    <option value="1" >   1  </option>
    <option value="3" >   0  30% </option>
    <option value="0" >   0  20%</option>

</select> ; } <br>

CSS main div {  flex-flow :
<select onchange="Order(this)">
    <option value="main row" > flex-flow : row </option>
    <option value="main column" > flex-flow : column </option>
</select> ; } <br>

</div><Br>

function Order(x) {
 if(x.value == "main row" )   { main.style.flexFlow = "row"; }
 if(x.value == "main column" ){ main.style.flexFlow = "column-reverse nowrap";}

if(x.value == "0" ){     div1.style.flex = "0 20%";
                         div2.style.flex = "0 20%";
                         div3.style.flex = "0 20%";  }

if(x.value == "3" ){     div1.style.flex = "0 30%";
                         div2.style.flex = "0 30%";
                         div3.style.flex = "0 30%";  }

if(x.value == "a" ){     div1.style.flex = "auto";
                         div2.style.flex = "auto";
                         div3.style.flex = "auto";  }

if(x.value == "i" ){     div1.style.flex = "initial";
                         div2.style.flex = "initial";
                         div3.style.flex = "initial";  }

if(x.value == "n" ){     div1.style.flex = "none";
                         div2.style.flex = "none";
                         div3.style.flex = "none";  }

if(x.value == "1" ){     div1.style.flex = "1 ";
                         div2.style.flex = "1 ";
                         div3.style.flex = "1 ";  }

if(x.value == "1 2 3" ){ div1.style.order = 1;
                         div2.style.order = 2;
                         div3.style.order = 3;  }

if(x.value == "2 1 3"){ div2.style.order = 1;
                         div1.style.order = 2;
                         div3.style.order = 3; }

if(x.value == "3 1 2" ){ div3.style.order = 1;
                         div1.style.order = 2;
                         div2.style.order = 3;  }

if(x.value == "1 3 2" ){ div1.style.order = 1;
                         div3.style.order = 2;
                         div2.style.order = 3;  }

if(x.value == "3 2 1" ){ div3.style.order = 1;
                         div2.style.order = 2;
                         div1.style.order = 3;  }

div1.innerHTML = "div1<br>order= "  + div1.style.order +
                  "<br>flex  = " + div1.style.flex;

div2.innerHTML = "div2<br>order= "  + div2.style.order +
                  "<br>flex  = " + div2.style.flex;

div3.innerHTML = "div3<br>order= "  + div3.style.order +
                  "<br>flex  = " + div3.style.flex;

//alert(x.value) 
}
Order("1 2 3");
</script>

Edit

#html #style #script #javascript #CSS #Order #CSS Order #display:flex order #元素的順序

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

CSS 排列對齊 flex-wrap,

</div>
</div>

<div class="st">
display:flex ;
 
 flex-wrap:
<select onchange="Mdiv.style.flexWrap = this.value">
    <option value="nowrap"       > wrap-reverse  </option>
    <option value="wrap"         > wrap          </option>
    <option value="wrap-reverse" > wrap-reverse  </option>
</select> <Br>

justifyContent :  
<select onchange="Mdiv.style.justifyContent = this.value" >
   <option value="initial"       >  initial      </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="center "       >  center       </option>
   <option value="initial"       >  initial      </option>
</select>  <br>

</div>

.st ,.st select { font-size: 22px; }

#MMdiv{ width:100%;height:600;
        display: flex;
        justify-content: center;
        align-items : center;     }

#Mdiv{ width:70%;height:500;
       overflow:scroll;
       border: 3px solid black; 
       display: flex;
       flex-wrap: initial;
       justify-content: initial;    }

</style>

Edit

#flex-wrap #flex-wrap () #擠壓對齊掛列 img #擠壓對齊掛列 div #script javascript #javascript #wrap #wrap-reverse #nowrap #html #img #div #justifyContent #flex-start #flex-end #space-between #space-around #space-evenly #center #平分兩端對齊 #整體平均分配 #script #CSS #script

flex-wrap 屬性介紹

Edit

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

[CSS] display:none和visibility:hidden的差別

[CSS] display:none
visibility:hidden 的差別

<div id="Dis" style="width:100%; height:400px;border: 1px solid blue; " >
    <div id="box1">display:block</div>
    <div id="box2">display:block</div>
    <div id="box3">display:block</div>
    <div id="box4">display:block</div>
</div>
  
<label class="container">display:block
  <input type="radio" checked="checked" name="radio" value="block" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:none
  <input type="radio" name="radio" value="none" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inline
  <input type="radio" name="radio" value="inline" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inline-block
  <input type="radio" name="radio" value="inline-block" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:list-item
  <input type="radio" name="radio" value="list-item" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inline-table	
  <input type="radio" name="radio" value="inline-table" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inherit	
  <input type="radio" name="radio" value="inherit" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>

box1.innerHTML ="display:" + x.value;
box2.innerHTML ="display:" + x.value;
box3.innerHTML ="display:" + x.value;
box4.innerHTML ="display:" + x.value;
}

</script>
 
<style>
#box1, #box2, #box3, #box4{background-color: yellow;color:red;
     border: 1px solid blue;width:130px; height:80px;   
     padding: 5px;font-size: 20px ;display:block; }
</style>

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}
</style>

<div style="font-size: 30px;text-align:center;color:blue;
            font-weight: bold;">
css display:none or visibility:hidden<br>
 都可以隱藏欄位或物件 差別
</div>

<div style="font-size: 20px">
<pre> visibility:hidden  物件內容隱藏了,的位置保持著不會消失
 display:none       物件內容連原本所在的位置都一起被隱藏了    
</pre></div>

#txt{font-size:25px}

#ta{width:100%;font-size:25px}
#ta td{text-align:center}
</style>

x.style.visibility= vv ;
x.style.display= dd;

tt1.innerHTML = "id3.style.display=" + dd ;
tt2.innerHTML = "ccs     id3{ display:" + dd +" }";

tt3.innerHTML = "id3.style.visibility=" + vv;
tt4.innerHTML = "ccs     id3{visibility:" + vv +" }";

//alert( "dd="+dd +" vv="+vv +"---" +x.style.display) 
}
handleClick( "inline","visible") ;
</script>

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}
</style>
<br>
<center>
<label class="container">inline 
  <input type="radio" checked="checked" name="radio"
     onclick="handleClick('inline','visible')" >
  <span class="checkmark"></span>
</label>
<label class="container">block
  <input type="radio" name="radio"
     onclick="handleClick('block','visible')" >
  <span class="checkmark"></span>
</label>
<label class="container">none
  <input type="radio" name="radio"
     onclick="handleClick('none','visible')" >
  <span class="checkmark"></span>
</label>
<label class="container">visibility:hidden
  <input type="radio" name="radio"
     onclick="handleClick('inline','hidden')" >
  <span class="checkmark"></span>
</label>
</center>

Edit

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS justify-content

CSS order

css flex-flow

align-content

CSS 排列對齊 flex-wrap,

flex-wrap 屬性介紹

[CSS] display:none和visibility:hidden的差別

[CSS] display:none
visibility:hidden 的差別

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

[CSS] display:none visibility:hidden 的差別

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

[CSS] display:none
visibility:hidden 的差別