vue实现一行有2个div,多出换行,逆向布局
时间: 2024-03-05 21:52:06 浏览: 72
你可以使用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:
```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:
```css
.container {
display: flex;
flex-wrap: wrap-reverse;
}
.item {
flex-basis: 50%;
align-self: flex-end;
}
```
这样就可以实现一行有两个div,溢出自动换行,且从右下至上布局的效果了。
vue实现一行有2个div,多出换行,从下至上布局
要实现从下至上布局,可以使用Flex布局的反向排列属性。具体步骤如下:
1. 在父元素上设置display:flex; flex-wrap:wrap; flex-direction:column-reverse;来实现子元素的从下至上排列。
2. 设置子元素的flex-basis属性为50%来让每个子元素占据一行的一半空间。
下面是一个基本的实现示例:
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;
flex-direction: column-reverse;
}
.child {
flex-basis: 50%;
}
```
这样就可以实现一行有两个div,多出换行,从下至上布局的效果了。
阅读全文