Parler de la disposition flexible, avec la disposition des dés à l'intérieur

Prenez l'habitude d'écrire ensemble ! C'est le sixième jour de ma participation au "Nuggets Daily New Plan · April Update Challenge", cliquez pour voir les détails de l'événement

avant-propos

Dans des scénarios d'application réels, nous rencontrons généralement divers appareils de différentes tailles et résolutions.Afin de disposer correctement notre interface d'application sur tous ces appareils, nous avons besoin d'une méthode de conception d'interface réactive pour pleinement ⾜ Cette mise en page complexe a besoin.

L'avantage du modèle de boîte élastique flexible est que les développeurs n'ont qu'à déclarer le comportement que la mise en page doit avoir, sans donner de méthode d'implémentation spécifique. Le navigateur est responsable de l'achèvement de la mise en page réelle. Lorsque la mise en page implique une largeur indéterminée, la distribution est aligné Lorsque la mise en page flexbox est prioritaire.

grammaire

flex-direction : ajuste la direction de l'axe principal

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
复制代码

justifier-contenu est principalement utilisé pour définir l'alignement de la direction de l'axe principal

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
复制代码

align-items est utilisé pour ajuster l'alignement de l'axe latéral

flex-start： 元素在侧轴的起始位置对齐。 
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。
复制代码

La propriété flex-wrap contrôle si le conteneur flexible est monoligne ou multiligne, et ne s'enroule pas par défaut

nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。
复制代码

align-content est utilisé pour définir la disposition des conteneurs flexibles multilignes

flex-start： 各行向侧轴的起始位置堆叠。 
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。 
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 
stretch：拉伸，不设置高度的情况下。
复制代码

Petite démo

changement d'axe flexible

    <ul class="box">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
    </ul>
复制代码

<style>
   /* *{
       margin:0;
       padding:0;
   } */
   .box{
       width:500px;
       height:500px;
       margin:20px auto;
       background:pink;
       display: flex;
       /* 主轴侧轴相互调换,而且主轴侧轴上的属性依旧可以使用，属性跟随轴一起走 */
       /* 默认 主轴水平 */
       /* flex-direction: row; */
       /* 切换 主轴垂直 */
       /* flex-direction: column; */
       /* flex-direction: column-reverse; */
       align-items: center;
       justify-content: space-between;
   }
   li {
       list-style: none;
       width: 100px;
       height: 100px;
       background-color: skyblue;
   }
</style>
复制代码

enveloppement flexible

 <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
    </ul>
复制代码

    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:500px;
            height:500px;
            margin:20px auto;
            background:pink;
            display: flex;
            /* 默认不换行 */
            /* flex-wrap: nowrap; */
            /* 换行 */
            flex-wrap: wrap;
        }
        li {
            /* 弹性布局中，如果一排放不下，会压缩 */
            list-style: none;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

alignement de l'axe latéral flexible

    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
    </ul>
复制代码

<style>
      *{
          margin:0;
          padding:0;
      }
      .box{
          width:500px;
          height:500px;
          margin:20px auto;
          background:pink;
          display: flex;
          flex-wrap: wrap;
          flex-direction:column;
          /* 单行和多行的区别  通过查看是否有换行属性 */
          /* 无论是否生效，都不能够混用！！！！ */
          /* 单行 */
          /* align-items: center;
          align-items: flex-start;
          align-items: flex-end;
          align-items: stretch; */
          /* 多行 */
          /* align-content: center; */
          /* align-content: flex-start; */
          /* align-content: flex-end; */
          /* 两端对齐，剩余平分 */
          /* align-content: space-between; */
          /* 每一个元素都拥有属于自己的间隙 */
          /* align-content: space-around; */
          /* 每一个元素之间间隙完全一样 */
          /* align-content: space-evenly; */
      }
      li {
          list-style: none;
          width: 100px;
          height: 100px;
          background-color: skyblue;
      }
  </style>
复制代码

Application de flexibilité : 1

    <ul>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
  </ul>

复制代码

    <style>
      *{
          padding: 0;margin: 0;            
      }
      li{
          /* width: 200px; */
          height: 200px;
          list-style: none;
          background-color: skyblue;
      }
      ul {
          /* 开启弹性布局 */
          display: flex;
          width: 1000px;
          height: 200px;
          margin: 100px auto;
          background-color: pink;
      }
      li {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      li:nth-child(2){
          flex: 2;
          background-color: teal;
      }
      li:nth-child(3){
          flex: 3;
          background-color: tomato;
      }
  </style>
复制代码

Utilisation complète des dés flexibles

    <div class="table">
      <div class="touzi t1">
          <span></span>
      </div>
      <div class="touzi t2">
          <span></span>
          <span></span>
      </div>
      <div class="touzi t3">
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="touzi t4">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="touzi t5">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="touzi t6">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
  </div>
复制代码

    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      
      .table {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          width: 600px;
          height: 600px;
          margin: 100px auto;
          background-color: teal;
      }
      
      .touzi {
          display: flex;
          width: 80px;
          height: 80px;
          background-color: whitesmoke;
          border-radius: 15px;
          padding: 10px;
      }
      
      .t1 span {
          background-color: red;
      }
      
      .t1 {
          justify-content: center;
          align-items: center;
      }
      
      span {
          display: block;
          width: 18px;
          height: 18px;
          background-color: black;
          border-radius: 50%;
      }
      
      .t2 {
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
      }
      
      .t3 {
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
      }
      
      .t3 span:nth-child(1) {
          align-self: flex-start;
      }
      
      .t3 span:last-child {
          align-self: flex-end;
      }
      
      .t4 {
          justify-content: space-between;
          align-content: space-between;
          flex-wrap: wrap;
      }
      
      .t4 span {
          margin: 5px;
      }
      
      .t5 {
          justify-content: space-between;
          align-content: space-between;
          flex-wrap: wrap;
      }
      
      .t6 {
          justify-content: space-between;
          align-content: space-between;
          flex-wrap: wrap;
          flex-direction: column;
      }
      
      .t5 span:nth-child(3) {
          margin: 0 21px;
      }
  </style>
复制代码