✍ 📁 🙈 🙉 🙊 : CSS display flex

display:flex;
align-items:auto / align-self:auto / align-content:auto

標簽

對齊, CSS display flex 排版工具 , CSS display flex flex-wrap, CSS display flex flex-direction, CSS display flex flex-flow, CSS display flex justify-content, CSS display flex align-item, CSS display flex align-content, CSS display flex align-self, CSS display flex order, CSS display flex Flex ,

<pre> <b> display:flex  排版工具 </b>

如果沒設成 display:flex，可佩配合下列語法 使用 :

1. flex-wrap : nowrap | wrap | wrap-reverse
       nowrap:預設值不能換行  wrap:換行  wrap-reverse:反轉換行

2. flex-direction:row | row-reverse | column | column-reverse
       row (預設值，由左至右，從上到下)
       row-reverse (排列方向和row一樣，但內元件順序會反轉)
       column (先從上到下，再由左至右)
       column-reverse (排列方向和column一樣，但內元件順序會反轉)

3. flex-flow:wrap | column wrap

5. align-item: stretch | flex-start | flex-end | center |
                         baseline 
             flex-start 上至下 開始排   flex-end 下至上 開始排
             stretch 會往交錯軸方向將內元素全部填滿
             center  上至下分中

6. align-content:stretch | flex-start | flex-end | center | 
                   space-around | space-between | space-evenly
           ** flex-wrap:wrap 才能觸發 flex-content **
          stretch 每行將拉伸以填滿剩餘空間     center 左右分中
         flex-start 左側開始排   flex-end 右側開始排   
         Space-around 是平均分配行的位置，上下兩側較小
         Space-between是平均分配行的位置，上下兩側會貼齊
         Space-evenly 是平均分配行的位置，上下兩側 間距皆相同

7. align-self: stretch | flex-start | flex-end | center |
                         baseline 
       align-self和align-item的功能一樣，但它是針對「單一」對象

8. order:0
        order預設值為0，它可以重新定義內元件的排列順序，
        順序會依照數值的大小排列

9. Flex (flex-grow、flex-shrink、flex-basis)

</pre>

<style>

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+ */
}
b{font-size:25px;color:blue;} 
r{font-size:20px;color:red;}

</style>

<b> div Horizontal & Vertical Align 水平垂直置中</b>
<div id="outerDiv">
     <div id="innerDiv">div id="innerDiv"     </div>
</div>

#innerDiv{width:150px ; height:150px;
          background: gray;
          color:white}

pre{position: fixed;top: 20px;left:10px;}
</style>
<pre>div id="outerDiv"

#outerDiv{
 width:100%;height:95%;
 border:1px solid black;  
 display:flex ;
 justify-content:center;
 align-items: center; }

#innerDiv{
 width:150px ; height:150px;
 background: gray;
 color:white }
</pre>
<style>

</style>

<b>display:flex + align-self: flex-start; </b>
<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 { align-self: flex-start}
#div2 { align-self: flex-end; }
#div3 { align-self: center;   }
#div4 { align-self: stretch;  }
#div5 { align-self: baseline; }
<<c>/style>
</pre>

.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+ */
}
</style>

<b>display:flex + order </b>
<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%; }

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

<div id="Input">
align-content : <br>
<label class="container">stretch
  <input type="radio" name="fradio" value="stretch" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">center
  <input type="radio" name="fradio" value="center">
  <span class="checkmark"></span>
</label>
<label class="container">flex-start
  <input type="radio" name="fradio" value="flex-start">
  <span class="checkmark"></span>
</label>
<label class="container">flex-end
  <input type="radio" name="fradio" value="flex-end">
  <span class="checkmark"></span>
</label>
<br><br>
<label class="container">flex-end
  <input type="radio" name="fradio" value="flex-end">
  <span class="checkmark"></span>
</label>
<label class="container">space-between
  <input type="radio" name="fradio" value="space-between">
  <span class="checkmark"></span>
</label>
<label class="container">space-around
  <input type="radio" name="fradio" value="space-around">
  <span class="checkmark"></span>
</label>
<label class="container">initial
  <input type="radio" name="fradio" value="initial">
  <span class="checkmark"></span>
</label>
<label class="container">inherit
  <input type="radio" name="fradio" value="inherit">
  <span class="checkmark"></span>
</label>
</div>

var Tag= document.querySelectorAll('input[name="fradio"]') ;
Tag.forEach((round) => {
  round.addEventListener("click", function() {
  outside_DIV.style.alignContent=round.value;
  DP1.innerHTML = round.value ;
  //DPM.innerHTML = round.value ;

}) })
</script>

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

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+ */
}

.container { position: relative;
             padding-left: 25px;
             cursor: pointer;
             font-size: 22px; }
.container input { opacity: 0;
                   cursor: pointer;}
.checkmark { position: absolute;
             top: 0;
             left: 0;
             height: 25px;
             width: 25px;
             background-color: #C0C0C0;
             border-radius: 50%;}
.container:hover input ~ .checkmark {
                background-color: #808080; }
.container input:checked ~ .checkmark {
                background-color: #2196F3; }
.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>

</div>
</div>

#outerDiv{width:50% ; height:60%;
          border: 1px solid black;
          display: initial ;
          justify-content: start;
          align-items: normal;
          flex-direction: row;
          flex-wrap:nowrap ;}

.innerDiv{width:80px ; height:70px;
          border: 1px solid black;}

</style>
<table border="1" style="width: 95%;"><tbody>
<tr><td style="width: 300px;">

display: <select onchange="Display(this.value)">
  <option value="initial">initial </option>
  <option value="flex">flex</option>
  <option value="inline-flex">inline-flex</option>
</select> 
 <br>
 justify-content: <select onchange="justifyContent(this.value)">
  <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="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="baseline">baseline</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</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>
</select> 
<br>
 align-items: <select onchange="alignItems(this.value)">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" >center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

<option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

<option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

<option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select> ; 
<br>
 flex-direction: <select onchange="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>
 flex-wrap: <select onchange="flexWrap(this.value)">
    <option value="nowrap">nowrap</option>
    <option value="wrap">wrap</option>
    <option value="wrap-reverse">wrap-reverse</option>
  </select> ;
</td><td>

function DPcss() {
var tt="<pre>" ; 
tt += "<<c>style>  " ;
tt += "\n  #outerDiv {" ;
tt += "\n    width:50% ; height:60% ;" ;
tt += "\n    border: 1px solid black ;" ;
tt += "\n    display: " ;
tt += outerDiv.style.display + " ;" ;

tt += "\n    justify-content:" ;
tt += outerDiv.style.justifyContent+ " ;" ;

tt += "\n    align-items:" ;
tt += outerDiv.style.alignItems+ " ;" ;

tt += "\n    flex-direction: row ;" ;
tt += outerDiv.style.flexDirection+ " ;" ;

tt += "\n    flex-wrap:nowrap ;" ;
tt += outerDiv.style.flexWrap+ " ;" ;

tt += "\n }</pre>"

DPspan.innerHTML= tt ;

} DPcss();

function Display(x) {
outerDiv.style.display = x ; DPcss();}

function alignItems(x){
outerDiv.style.alignItems = x ;DPcss();}

function justifyContent(x){
outerDiv.style.justifyContent= x ;DPcss();}

function flexDirection(x){
outerDiv.style.flexDirection= x ;DPcss();}

function flexWrap(x){
outerDiv.style.flexWrap= x ;DPcss();}

</script>

Edit

#html #網頁格式 #script #style #div #CSS div #CSS align-items #CSS align-self #CSS align-content #CSS flex #CSS flex-basis #CSS flex-basis

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS display flex

display:flex;
align-items:auto / align-self:auto / align-content:auto

沒有留言:

張貼留言

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

CSS display flex

display:flex; align-items:auto / align-self:auto / align-content:auto

沒有留言:

張貼留言

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

display:flex;
align-items:auto / align-self:auto / align-content:auto