flex布局

父项：

display: flex; 设置普通的盒子变为 flex 盒子

主轴方向

使用 flex-direction 改变元素排列方向（主轴默认是 x 轴 row）（侧轴默认是垂直方向）

修改主轴方向属性：如下

div {
		display: flex;  (属性给父级添加)
		
		flex-direction: row：  （ 默认 行  从左往右）
		flex-direction: row-reverse: （行，从右向左）

		flex-direction: （column ：y轴，垂直）
		flex-direction: column-reverse ：（列 ，从下向上 ）
}

效果图：

flex 换行

弹性盒子换行显示： flex-wrap: wrap; （默认是不换行 nowrap ）

对齐方式

justify-content 设置主轴对齐方式：

justify-content:flex-start;( 子项左对齐)

justify-content:flex-end;( 子项右对齐)

justify-content:center;  （子项居中）  （图1）

justify-content: space-between; （子项两侧对齐，剩下的居中分配剩余空间） 图2

justify-content: space-around; （两边间隔小于中间）   图3

justify-content: space-evenly;  （绝对平分）  图4

图 1 ，2

图 3 ， 4

flex 布局值设置侧轴对齐方式

align-item （单行）

flex-start （设置子项上对齐）
flex-end （子项下对齐）
center （子项居中）

align-content （多行）

align-content

取值与justify-content基本相同：如图

子项

默认的高度等于内容撑开
默认高度等于父项的高度
flex：1 设置子项的宽度
align-seft 设置子项在侧轴上的对齐

主轴改成了 column （y轴）

默认的高度等于内容撑开
flex：1 设置子项的高度
align-seft 设置子项在侧轴上的对齐（水平）
默认的宽度等于父项的宽度

flex相关布局