我如何使用 flexbox 实现它？

Question

我正在尝试使用 CSS Float 和 CSS flexbox 实现 Microsoft 的徽标（就像 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>

有人可以帮助我做错什么吗？

Answer 1

将 nowrap 更改为 wrap，然后为您的容器设置宽度（在本例中为 180px，因为每个框为 50px + 20px 左填充 + 20px 右填充）并删除所有 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>

Answer 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>

我如何使用 flexbox 实现它？

How can I implement this using flexbox?

css

css-float

flexbox