两个div盒子上下两行布局
时间: 2023-07-04 17:06:15 浏览: 143
可以使用以下CSS样式实现两个div盒子上下两行布局:
HTML代码:
```
<div class="container">
<div class="box1">内容1</div>
<div class="box2">内容2</div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.box1, .box2 {
width: 300px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
```
解释:
1. 使用flex布局,设置容器display属性为flex,flex-direction属性为column,让子元素垂直排列。
2. 使用align-items属性设置子元素在交叉轴上的对齐方式,这里设置为居中对齐。
3. 设置box1和box2的宽度、高度、背景色和外边距。
相关问题
弹性盒子布局flex写出两行两列的布局
以下是使用弹性盒子布局flex实现两行两列布局的代码:
```html
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
```
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
.box {
width: 180px;
height: 180px;
background-color: #f5f5f5;
border: 1px solid #ccc;
margin-bottom: 20px;
}
```
解释:
- 将容器设置为弹性盒子布局,使用`flex-wrap: wrap`实现自动换行。
- 使用`justify-content: space-between`实现每行元素的间距相等。
- 使用`align-items: center`实现每列元素的垂直居中。
- 每个盒子设置宽高和边框,使用`margin-bottom: 20px`实现下边距为20px。
flex布局一行两个平均
根据提供的引用内容,要实现flex布局一行两个平均的效果,可以使用以下方法:
1. 设置父容器的`flex-wrap: wrap;`属性,使其可以自动换行。\[3\]
2. 设置子元素的宽度为50%(或者使用`calc((100% - 间隙宽度) / 2)`的方式计算宽度),这样每行就可以容纳两个子元素。\[1\]
3. 可以使用`flex-grow: 1;`来让子元素等分剩余空间,实现平均分配的效果。\[2\]
以下是一个示例代码:
```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>
<style>
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
width: 50%;
/* 或者使用以下方式计算宽度 */
/* width: calc((100% - 间隙宽度) / 2); */
}
</style>
```
这样,父容器中的子元素就会自动换行,并且每行会平均分配两个子元素的宽度。
#### 引用[.reference_title]
- *1* [flex布局 一行显示两个同宽、高的盒子 并 可以换行](https://blog.csdn.net/m0_49471668/article/details/126627521)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [flex布局一行显示多个](https://blog.csdn.net/weixin_53472524/article/details/122163353)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [CSS - display flex 弹性布局实现一行仅显示 2 个,每行显示指定个数(设置 space-between / space-around ...](https://blog.csdn.net/weixin_44198965/article/details/129022872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]