flex布局实现骰子六个面的写法

1.flex实现骰子六个面之<布局一>

image.png

 <ul class="view-box1 container">
    <li class="one">1</li>
  </ul>

.view-box1 {
  background-color: #f5f5f5;
  width: 200px;
  height: 200px;
  margin-top:20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.one {
  background-color: aqua;
  width: 40px;
  height: 40px;
}

2.flex实现骰子六个面之<布局二>

image.png

  <ul class="view-box1 container">
    <li class="one">1</li>
    <li class="two">2</li>
  </ul>

.view-box1 {
  background-color: #f5f5f5;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content:space-evenly;
  align-items: center;
}

.one {
  background-color: aqua;
  width: 40px;
  height: 40px;
}

.two {
  background-color: pink;
  width: 40px;
  height: 40px;
}

3.flex实现骰子六个面之<布局三>

image.png

 <ul class="view-box1 container">
    <li class="one">1</li>
    <li class="two">2</li>
    <li class="three">3</li>
  </ul>

.view-box1 {
  background-color: #f5f5f5;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
}

.one {
  background-color: aqua;
  width: 40px;
  height: 40px;
}

.two {
  background-color: pink;
  width: 40px;
  height: 40px;
  align-self: center
}
.three {
  background-color: #ff3040;
  width: 40px;
  height: 40px;
  align-self: flex-end;
}

4.flex实现骰子六个面之<布局四>

image.png

 <div class="view-layout">
    <ul class="view-box1">
      <li class="one">1</li>
      <li class="two">2</li>
    </ul>
    <ul class="view-box2">
      <li class="three">1</li>
      <li class="four">2</li>
    </ul>
  </div>

.view-layout {
  display: flex;
  flex-direction: column;  //主轴为垂直方向
  width: 200px;
  height: 200px;
}

.view-box1 {
  background-color: #f5f5f5;
  flex-grow: 1;  //按照比例均分父元素的剩余空间
  display: flex;
  align-items: center;//项目在交叉轴方向居中
  justify-content: space-evenly;  //项目在主轴方向间距均等分布
}

.view-box2 {
  background-color: #ccc;
  flex-grow: 1;    //
  display: flex;
  align-items: center;    
  justify-content: space-evenly;  
}

.one {
  background-color: aqua;
  width: 40px;
  height: 40px;
}
.two {
  background-color: pink;
  width: 40px;
  height: 40px;
}
.three {
  background-color: #ff3040;
  width: 40px;
  height: 40px;
}

.four {
  background-color: aquamarine;
  width: 40px;
  height: 40px;
}

5.flex实现骰子六个面之<布局五>

image.png

 <div class="view-container">
    <ul class="view-box1">
      <li class="one">1</li>
      <li class="two">2</li>
    </ul>
    <ul class="view-box2">
      <li class="three">3</li>
    </ul>
    <ul class="view-box3">
      <li class="four">4</li>
      <li class="five">5</li>
    </ul>
  </div>

.view-box1,
.view-box2,
.view-box3 {
  background-color: #f5f5f5;
  width: 240px;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.view-box2 {
  background-color: antiquewhite;
}
.view-box3 {
  background-color: #666;
}

.one {
  background-color: aqua;
  width: 50px;
  height: 50px;
}

.two {
  background-color: pink;
  width: 50px;
  height: 50px;
}
.three {
  background-color: #ff3040;
  width: 50px;
  height: 50px;
}

.four {
  background-color: aquamarine;
  width: 50px;
  height: 50px;
}

.five {
  background-color: orange;
  width: 50px;
  height: 50px;
}

6.flex实现骰子六个面之<布局六>

image.png

 <div class="view-container">
    <ul class="view-box1">
      <li class="one">1</li>
      <li class="two">2</li>
    </ul>
    <ul class="view-box2">
      <li class="three">3</li>
      <li class="four">4</li>
    </ul>
    <ul class="view-box3">
      <li class="five">5</li>
      <li class="six">6</li>
    </ul>
  </div>

.view-box1,
.view-box2,
.view-box3 {
  background-color: #f5f5f5;
  width: 240px;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.view-box2{
  background-color: antiquewhite
}
.view-box3{
  background-color: #666
}

.one {
  background-color: aqua;
  width: 50px;
  height: 50px;
}

.two {
  background-color: pink;
  width: 50px;
  height: 50px;
}
.three {
  background-color: #ff3040;
  width: 50px;
  height: 50px;
}

.four {
  background-color: aquamarine;
  width: 50px;
  height: 50px;
}

.five {
  background-color: orange;
  width: 50px;
  height: 50px;
}

.six {
  background-color: black;
  width: 50px;
  height: 50px;
}

以上是我自己写的小demo,使用flex布局实现骰子六个面写法， 这年头不会flex布局，真的不行，之前我也是觉得用定位，百分比布局也够了，就不太想学flex布局，后来面试的时候，别人正好问到了flex布局，然后我就被完虐了，受到打击之后，就自学了flex布局，学习了之后，才发现flex布局真的很好用，真的后悔没早点学习，建议各位前端朋友们也都学习下flex布局哦