flex布局

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下flex布局,flex布局还是比较常用的自适应布局,今天就给大家讲一下常用的指令,我们今天可以用flex布局写一个简单的麻将(筒)

• display 为 flex：弹性盒子

• justify-content：水平对齐方式

  • flex-start：主轴靠左对齐（默认值）
  • flex-end：主轴靠右对齐
  • center：主轴水平居中对齐
  • space-around：两端对齐，两端间距是中间距离的一半
  • space-between：两端靠边对齐，中间等距
  • space-evenly：两端对齐，两端间距与中间距离等距

• align-items 为 center ：侧轴垂直居中对齐

• flex-wrap 为 wrap, wrap 是换行，默认 nowrap 不换行

• flex-direction 为 column：主轴和侧轴换位置，名字不变

• align-self 为 center：自身侧轴垂直居中对齐（设置给弹性盒子的子元素）

---

公共的样式

一筒

.ul1 {
      display: flex;
      justify-content: center;
      align-items: center;
 }

二筒

.ul2 {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
}

三筒

 .ul3 {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 10px;
    }

    .ul3 li:nth-child(2) {
      align-self: center;
    }

    .ul3 li:nth-child(3) {
      align-self: flex-end;
    }

四筒

.ul4 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

    }
    .ul4>li {
      margin: 10px;
    }

五筒

 .ul5 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
    }

    .ul5 li {
      margin: 10px;
    }

    .ul5 :nth-child(3) {
      margin: 0 30px;
    }

六筒

.ul6 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .ul6 li {
      margin: 0px 10px;
      transform: scale(1.1deg);
    }

七筒

 .box {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      /* padding: 5px; */
    }

    .box li:nth-child(1) {
      align-self: flex-start;
    }

    .box li:nth-child(2) {
      align-self: center;
    }

    .box li:nth-child(3) {
      align-self: flex-end;
    }

    .box1 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .box1>li {
      margin: 0px 10px;
    }
    
    
      <ul class="ul7">
      <div class="box">
        <li></li>
        <li></li>
        <li></li>
      </div>

      <div class="box1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </div>

    </ul>

八筒

.ul8 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .ul8 li {
      margin: 0px 10px;
    }

九筒

.ul9 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .ul9 li {
      margin: 0px 3px;
    }

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!