✍ 📁 🙈 🙉 🙊 : flex direction

<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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

flex direction

沒有留言:

張貼留言

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

flex direction

沒有留言:

張貼留言

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單