css实现垂直顶部与底部对齐、上下两端对齐、height、display、flex、wrap、content、space、between

---

1、代码实现

HTML部分

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

---

css部分

.box {
	height: 130px;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

.box>div {
	height: 60px;
}

---

2、display

定义和用法

display属性规定元素应该生成的框的类型。

---

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于HTML等文档类型，如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。对于XML，由于XML没有内置的这种层次结构，所有display是绝对必要的。

---

注释

CSS2中有值compact和marker，不过由于缺乏广泛的支持，已经从CSS2.1中去除了。

---

属性值及作用

序号	值	描述
01	none	此元素不会被显示。
02	block	此元素将显示为块级元素，此元素前后会带有换行符。
03	inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
04	inline-block	行内块元素(CSS2.1新增的值)
05	list-item	此元素会作为列表显示。
06	run-in	此元素会根据上下文作为块级元素或内联元素显示。
07	compact	CSS中有值compact，不过由于缺乏广泛支持，已经从CSS2.1中删除。
08	marker	CSS中有值marker，不过由于缺乏广泛支持，已经从CSS2.1中删除。
09	table	此元素会作为块级表格来显示(类似table)，表格前后带有换行符。
10	inline-table	此元素会作为内联表格来显示(类似table)，表格前后没有换行符。
11	table-row-group	此元素会作为一个或多个行的分组来显示(类似tbody)。
12	table-header-group	此元素会作为一个或多个行的分组来显示(类似thead)。
13	table-footer-group	此元素会作为一个或多个行的分组来显示(类似tfoot)。
14	table-row	此元素会作为一个表格行显示(类似tr)。
15	table-column-group	此元素会作为一个或多个列的分组来显示(类似colgroup)。
16	table-column	此元素会作为一个单元格列显示(类似col)
17	table-cell	此元素会作为一个表格单元格显示(类似td和th)
18	table-caption	此元素会作为一个表格标题显示(类似caption)
19	inherit	规定应该从父元素继承display属性的值。