flex弹性布局 grid网格布局(0726)

1、flex弹性布局是什么

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

2、容器的属性

容器属性名称	属性意义	属性可能的值
flex-direction	决定item排列方向	row,row-reverse,column,column-reverse
justify-content	item在主轴上的对齐方式	flex-start,flex-end,center,space-between,space-around
flex-wrap	排列不下时，item如何换行	nowrap,wrap,wrap-reverse
align-content	侧轴上子元素的排列方式(多行)	flex-start,flex-end,center,space-between,space-around,stretch
align-items	侧轴上子元素的排列方式(单行)	flex-start,flex-end,center,space-between,space-around,stretch
flex-flow	复合属性	相当于同时设置了flex-direction和flex-wrap

1. flex-direction：决定主轴的方向

.div {   
    flex-dir