flex的常用布局

容器属性（设置在容器上）

1.flex-direction （元素排列方向）

• flex-direction:row（横向从左到右排列，左对齐）
• flex-direction:row-reverse（右对齐）
• flex-direction:column（从上往下排列，顶对齐）
• flex-direction:column-reverse（底对齐）

2.flex-wrap（内容一行容不下时有效）

• flex-wrap:nowrap（默认超出不换行）
• flex-wrap:wrap（换行，第一行在上方）
• flex-wrap:wrap-reverse（换行，第一行在下方）

3.justify-content（水平对齐方式）

• justify-content: flex-start（水平左对齐）
• justify-content:flex-end（水平右对齐）
• justify-content:center（水平居中对齐）
• justify-content:space-between（两端对齐，内部元素之间的间隔都相等）
• justify-content:space-around（每个内部元素两侧的间隔相等）

align-items（垂直对齐方式）

• align-items:stretch（默认值，内部元素没有设高或者高度为auto，将占满整个容器的高度）
• align-items:flex-start（上对齐）
• align-items:flex-end（下对齐）
• align-items:center（居中对齐）
• align-items:baseline（内容元素的第一行文字的基线即底部对齐）

示例：水平垂直居中

<div class="parent">
	<h1>1</h1>
	<h1>2</h1>
	<h1>2222</h1>
	<h1>555555555555555555</h1>
</div>
<style>
	.parent {
		  display:flex;
		  align-items:center;/*垂直居中*/
		  justify-content: center;/*水平居中*/
		  width:100px;
		  height:100px;
		  background: #ddd
	 }
</style>
 

元素属性

1.order（元素排列顺序）

• order: 1/2/3/…（必须是整数，数值越小，排列越靠前）

2.flex-grow（元素放大比例）

• flex-grow: number|initial|inherit;

3.flex-shrink（元素缩小比例）

• flex-shrink: number|initial|inherit;

4.flex-basis（设置活检索元素的伸缩基准值）

• flex-basis: number|auto|initial|inherit;

5.flex（设置或检索弹性盒模型对象的子元素如何分配空间）

• flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

6.align-self（允许单个项目有与其他项目不一样的对齐方式）

• align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;