Flex布局(属性及代码)

1.概念

flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

2.作用 

我们需要它解决元素居中问题以及自动弹性伸缩来达到合适适配不同大小的屏幕和移动端的目的

3.flex的常见术语

a.二成员（容器和项目）

b.二根轴（主轴与交叉轴）

c.二根线（起始线与结束线）

A. flex-direction  主轴方向

row（默认值）:主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

 B. justify-content属性

    justify-content属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间

    flex-start：默认值，表示项目对齐到主轴起点，项目间不留空隙。

    flex-end：项目对齐到主轴终点，项目间不留空隙。

    center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。

    space-between：两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等。

    space-around：每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。

    C. align-items属性

    align-items属性用于设置项目在交叉轴上的对齐方式。

    center：项目在交叉轴的中间位置对齐。

    flex-start：项目顶部与交叉轴起点对齐。

    flex-end：项目底部与交叉轴终点对齐。

    baseline：项目的第一行文字的基线对齐。 

​​​​​​​

    D. flex-wrap属性:

    flex-wrap属性用于规定是否允许项目换行，能够设置多行排列时换行的方向. 

     nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩。

    wrap：当容器单行容不下所有项目时允许换行排列。

    wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap的反方向。 

 结构伪类选择器 :nth-child() 作为父元素的第n个元素