css实现垂直顶部与底部对齐上下两端对齐heightdisplayflexwrapaligncontentspacebetweennowrapreverse

Posted 2022-12-15 牧码厂

文章目录

• 1、代码实现
• 2、属性解析

---

1、代码实现

HTML部分

<div class="box">
	<div>上</div>
	<div>下</div>
</dic>

---

css部分

.box 
	height: 130px;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;


.box > div 
	height: 60px;

---

2、属性解析

flex-wrap属性指定flex元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
nowrap：flex的元素被摆放到到一行，这可能导致flex容器溢出。cross-start会根据flex-direction的值等价于start或before。为该属性的默认值。
wrap：flex元素被打断到多个行中。cross-start会根据flex-direction的值等价于start或before。cross-end为确定的cross-start的另一端。
wrap-reverse：和wrap的行为一样，但是cross-start和cross-end互换。

align-content属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。