vue实现一行有2个div，多出换行

您可以使用 CSS 中的 `flexbox` 布局来实现这个要求。

首先，将包含这两个 `div` 元素的父元素设置为 `display: flex`，并且设置 `flex-wrap: wrap`，这样当子元素宽度超出父元素宽度时，就会自动换行。

然后，设置子元素的宽度为父元素宽度的一半，即 `width: 50%`，这样每行就会有两个子元素。

最后，您可以通过调整 `div` 元素的样式来实现您想要的布局。

以下是示例代码：

HTML:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS:

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

.box {
  width: 50%;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

相关问题

vue实现一行有2个div，多出换行，逆向布局

你可以使用Flex布局来实现该需求，具体步骤如下：

1. 在父元素上设置display:flex; flex-wrap:wrap;来实现子元素的换行。

2. 设置子元素的flex-basis属性为50%来让每个子元素占据一行的一半空间。

3. 设置子元素的order属性为-1来实现逆向布局，即先显示后面的元素。

下面是一个基本的实现示例：

HTML代码：

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

CSS代码：

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

.child {
  flex-basis: 50%;
  order: -1;
}

这样就可以实现一行有两个div，多出换行，逆向布局的效果了。

vue实现一行有2个div，多出换行，从右下至上布局

您可以使用Flexbox布局来实现这个要求。具体实现步骤如下：

1. 在外层容器中设置`display: flex`，并设置`flex-wrap: wrap-reverse`，使得子元素溢出时从右下方开始换行。

2. 在子元素中设置`flex-basis`为50%，表示每个子元素占据一行的50%宽度。

3. 在子元素中设置`align-self: flex-end`，使得子元素底部对齐。

完整的代码如下：

HTML:

<div class="container">
  <div class="item">div 1</div>
  <div class="item">div 2</div>
  <div class="item">div 3</div>
  <div class="item">div 4</div>
  <div class="item">div 5</div>
  <div class="item">div 6</div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

.item {
  flex-basis: 50%;
  align-self: flex-end;
}

这样就可以实现一行有两个div，溢出自动换行，且从右下至上布局的效果了。