[分享]css两个盒子不同行

在 CSS 中，我们可以使用 display: inlineblock; 或者 float 属性来让两个盒子处在同一行，但是有时候我们想要让它们分开，那么该怎么做呢？我们可以使用 display: f...

在 CSS 中，我们可以使用 display: inline-block; 或者 float 属性来让两个盒子处在同一行，但是有时候我们想要让它们分开，那么该怎么做呢？

我们可以使用 display: flex; 属性来实现这个效果。在父元素上加上 display: flex; 后，子元素会默认成为 flex-item，所以我们只需要给需要分开的子元素添加一些属性即可。比如要让第二个子元素换行，我们可以这样写：

.parent {
  display: flex;
}

.child1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.child2 {
  width: 100px;
  height: 100px;
  background-color: #0f0;
  flex-wrap: wrap;
} 

上面的代码中，我们在第二个子元素上加了一个 flex-wrap: wrap; 属性，这样子元素就会在父元素的宽度不够的时候自动换行了。如果我们想要让两个子元素分别占据一行，可以这样写：

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child1 {
  width: 100%;
  height: 100px;
  background-color: #f00;
}

.child2 {
  width: 100%;
  height: 100px;
  background-color: #0f0;
} 

这里我们在父元素上加了一个 flex-wrap: wrap; 属性，这样子元素就可以自动换行了。然后给子元素加上了 width: 100%;，这样它们就可以分别占据一行了。

总之，使用 display: flex; 属性可以让我们更方便地控制子元素的位置和大小，给网页设计带来更多可能。