我如何使用 flexbox 来实现它？答案

【问题标题】：How can I implement this using flexbox?我如何使用 flexbox 来实现它？
【发布时间】：2019-08-16 19:15:00
【问题描述】：

我正在尝试使用 CSS Float 和 CSS flexbox 来实现 Microsoft 的 Logo（就像一个 CSS 练习练习）

我使用浮点数让它工作，但是我无法使用 Flexbox 让它工作。有人可以就我哪里出错了？

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}

.box1 {
  background-color: red;
  float:left;
}

.box2 {
  background-color: green;
  float: left;
}

.box3 {
  clear: both;
  float: left;
  background-color: blue;
}

.box4 {
  float: left;
  background-color: orange;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author">
        <title>MS</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

但是，我尝试在 flexbox 中实现相同的功能，但失败了：

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.box1 {
  background-color: red;
  flex: 1;
}

.box2 {
  background-color: green;
  flex: 3;
  order: -1;
}

.box3 {
  background-color: blue;
  flex:2;
}

.box4 {
  background-color: orange;
  flex: 4;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author" content="Rupesh Dabbir">
        <title>LinkedIn</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

有人可以帮忙解决我做错了什么吗？

【问题讨论】：

flex-wrap: nowrap; --> flex-wrap: wrap; 并移除所有的 flex 属性

标签： css flexbox css-float

【解决方案1】：

将nowrap 更改为wrap，然后为您的容器设置一个宽度（在这种情况下为180 像素，因为每个框都是50 像素+ 20 像素左填充+ 20 像素右填充）并从框项目中删除所有flex 属性。

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 180px;
}

.box1 {
  background-color: red;
}

.box2 {
  background-color: green;
}

.box3 {
  background-color: blue;
}

.box4 {
  background-color: orange;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author" content="Rupesh Dabbir">
        <title>LinkedIn</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

【讨论】：

【解决方案2】：

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:200px;
}
.box1 {
  background-color: red;
}

.box2 {
  background-color: green;
}

.box3 {
  background-color: blue;
}

.box4 {
  background-color: orange;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author" content="Rupesh Dabbir">
        <title>LinkedIn</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

【讨论】：