css3:神祕的彈性盒子flexbox

時間 2019-12-08

標籤 css3 css 神祕彈性盒子 flexbox 欄目 CSS 简体版

原文原文鏈接

請先運行demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>主軸爲垂直方向  --by 李可</title>
  <style>
    .flex-container{
      padding:0;margin:0;list-style:none;
      display:-webkit-flex;
      display:flex;
      width:700px;
      height:245px;
      /*主軸不必定是水平，縱軸不必定垂直，4個方向都有可能*/ 
      /*下面flex-direction:colomn肯定的主軸的方向是垂直向下的。*/
      /*下面flex-wrap:wrap包裹，溢出自動在主軸平行的方向換「行（這裏是換列）」*/
      -webkit-flex-flow:column wrap;
      
      /*主軸方向（這裏垂直向下）*/
      /*主軸方向（這裏垂直向下），也許溢出致使多行或者多列，每行或者每列主軸方向（水平、垂直）居中 上下左右~等*/
     justify-content:center;
     /*  justify-content:flex-start;*/
     /* justify-content:flex-end;*/
      
      /*縱軸方向（這裏水平向右）*/
      /*縱軸方向（這裏水平向右），也許溢出致使多行或者多列(這裏)，每行或者每列(這裏)的項目在這行或者列中的側軸方向（水平（這裏向右）、垂直）上居中 上下左右，等*/
      /*align-items:stretch;*/ /*縱軸方向（這裏水平向右），把項目的width去掉，若是是垂直，去掉高度，默認strecth*/
      /*坑！！，剩餘空間：延伸項目延伸：延伸到這列（這裏）或者行最大的項目的寬（這裏）或者高*/
      align-items:baseline;/*坑！！主軸爲垂直，一列的項目不可能按基準線對齊，設置這個以後，這是時候是默認到flex-start;*/
      /*align-items:flex-end;*/
     /*align-items:center; */
      /*align-items:flex-start;*/

       /*（多縱軸方向） 各行或者各列（這裏）之間有空隙*/
      
      /*溢出主軸，空隙。--》在側軸方向的各行或者各列之間（這裏是多列）的對齊。或者多列的彈性盒模型容器*/
      /*注意這裏說的是行或者列之間的佈局，就至關於把溢出的的行或者列當成一個元素~*/
      /*多行或者多列*/
      /*0，行和列（這裏）的剩餘空間的計算*/
       /*stretch的理解，多行或者多列的「剩餘空間」先平均分配，
       1，設置了項目的寬度（這裏）或者高度，每一行或者列（這裏）的留的富裕空間同樣。
       2，和每一列（這裏）或者行的寬（這裏）高不要緊。
       */
       /*align-content:stretch;*/
       align-content:space-around;
       /* align-content:space-between ;*/
       /* align-content:flex-start;*/
      /*align-content:center;  */ 
      /* align-content:flex-end;*/
      background:yellowgreen;
    }
    .flex-item{
      box-sizing:border-box;
      background:tomato;
      width:200px;
      height:50px;
      border:1px solid green;
      color:white;
    }
    .flex-item:nth-of-type(1){
      width:250px;
    }
    .flex-item:nth-of-type(2){
      width:30px;
    }
    .flex-item:nth-of-type(3){
      width:320px;
      order:-1;/*調整位置，默認爲0，越小越靠前。*/
    }
    /* .flex-item:nth-of-type(5){
      width:410px;
    }*/
    .flex-item:nth-of-type(6){
      width:150px;
     align-self: center;/*單獨地調節一個項目的縱軸方向在這行或者列（這裏）的位置*/
    }
  </style>
</head>
<body>
  <ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>
</body>
</html>

舊彈性盒子

過渡彈性盒子

新彈性盒子

功能相似，次加了幾個屬性html

/6個盒子屬性。竅門：flex-flow是：flex-direction flex-wrap的簡寫。這下3合1了~/
/
肯定主軸方向：這是個坑！！必定是先肯定主軸方向,第一個項目到最後一個項目的排列順序都是從主軸的開始位置到最後位置排列。
主軸方向水平向右，項目第一項水平靠左，依次向右排列| 主軸方向：項目之間有木有空隙，align-content？？？默認stretch align-self？？
主軸方向水平向左，項目第一項水平靠右，依次向左排列|
主軸方向垂直向下，項目第一項垂直靠上，依次向下排列|
主軸方向垂直向上，項目第一項垂直靠下，依次向上排列
/
1，flex-direction ：row(默認水平) | row-reverse | column | column-reverse;
/
盒子項目在溢出時：
一行項目自動縮小填滿盒子|
換行（多行）|
換行，第二行排在第一行上面
/
2，flex-wrap：nowrap(默認一行，項目伸縮) | wrap | wrap-reverse;
3，flex-flowcss3

/6個項目屬性。竅門：flex是：flex-grow flex-shrink flex-basis的簡寫。這下4合1了~/
1，flex-grow： ; /* 默認0 /
2，flex-shrink： ; / 默認 1 //這是個坑！！和grow的區別 /
3，flex-basis： | auto; / 默認 auto */
4，flex
5，order： ;
6，align-self：auto | flex-start | flex-end | center | baseline | stretch; ide