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" content="Rupesh Dabbir">
        <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来实现呢？

2 个答案: