flex弹性布局和grid网格布局

flex弹性布局和grid网格布局

一、flex弹性布局

1.1flex弹性盒模型

Flex布局可以简便、完整、响应式的实现各种页面的布局。其包括：作用在flex容器上的属性和作用在flex子项上属性。则：
作用在flex容器上有：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

作用在flex子项上有：
order
flex-grow
flex-shrink
flex-basis
flex
align-self

1.2flex-direction

flex-direction，是用来控制子项整体布局的方向，是要从左往右还是从右往左，是要从上往下还是从下往上。

取值有：
row：这个值为默认值，显示为行，方向为当前文档水平流的方向，默认情况下是从左往右。
row-reverse：该值为显示为行，但方向和row属性值是相反的。
column：该值为显示为列。
column-reverse：该值为显示为列，但方向和column属性值是相反的。

1.3flex-wrap

flex-wrap是用来控制子项整体单行显示还是换行显示的。

取值有：
nowrap：该值为默认值，表示单行显示不换行。
wrap：表示宽度不足以换行显示。
wrap-reverse：表示宽度不足以换行显示，但是是从下往上开始，也就是原本在换行下面的子项现在跑到上面来了。

1.4flex-flow

flex-flow的属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，第一个值表示的是方向，第二个值表示的是换行，中间是用空格进行隔开。

1.5justify-content

justify-content的属性决定了主轴方向上子项对齐的方式和分布的方式。

取值有：
flex-start：该值为默认值，表现为起始位置的对齐。
flex-end࿱