css之flex两端对齐，且元素自动换行、flex、flow

---

效果图

---

html

<div class="parent_element">
	<div class="item">7</div>
	<div class="item">7</div>
	<div class="item">7</div>
	<div class="item" style="margin-top: 6px;">7</div>
	<div class="item" style="margin-top: 6px;">7</div>
	<div class="item" style="margin-top: 6px;">7</div>
</div>

<div class="parent_element">
	<div class="item">7</div>
	<div class="item">7</div>
	<div class="item">7</div>
	<div class="item" style="margin-top: 6px;">7</div>
	<div class="item" style="margin-top: 6px;">7</div>
</div>

<div class="parent_element">
	<div class="item">7</div>
	<div class="item">7</div>
	<div class="item">7</div>
	<div class="item" style="margin-top: 6px;">7</div>
</div>

---

style

.parent_element {
    
    
	width: 368px;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	border: 1px solid #ff0000;
	padding: 8px;
	box-sizing: border-box;
}

.item {
    
    
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-size: 50px;
	border: 1px solid #0000ff;
}

---

flex-flow

MDN

CSSflex-flow属性是flex-direction和flex-wrap的简写。

---

w3school

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值为 "row"。 规定弹性项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值为 "nowrap"。 规定弹性项目是否应换行。
initial	将此属性设置为其默认值。参阅 initial 。
inherit	从其父元素继承此属性。参阅 inherit 。