小程序开发之【前端开发】【学习第三节】【二】

flex布局

flex布局主要由容器和项目构成。采用flex布局的元素，称为flex容器（flex container），它的所有直接子元素自动成为容器成员，称为flex项目（flex item）。可以通过设置display:flex或display:inline-flex将任何一个元素指定为flex布局。容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（main axis），主轴开始的位置叫main start，结束位置叫main end，和主轴的方向有关；交叉轴开始的位置叫cross start，结束cross end，和交叉轴方向有关。项目默认从主轴开始的位置到主轴结束的位置进行排列，项目在主轴上占有的空间叫main size，交叉轴上叫cross size。

容器的属性

1.display指定元素是否为flex布局

.mybox{display:flex | inline-flex;}

flex产生块级flex布局

inline-flex产生行内flex布局，符合行内元素的特性，同时符合flex规范

设置flex布局以后，子元素的float、clear和vertical-align属性将会失效

2.flex-direction，用于指定主轴的方向，即项目排列的方向

.mybox{flext-direction:row | row-reverse | colum | colum-reverse;}

row：主轴为水平，起点在左，默认值

row-reverse：起点在右

colum：主轴为垂直，起点在上

colum-reverse：起点在下

3.flex-wrap，一般来说，项目都排在一条线上，flex-wrap用来指定如果一套轴线放不下，该如何换行。

.mybox{flex-wrap:nowrap | wrap | wrap-reverse;}

nowrap:不换行，默认值

wrap:换行，第一行在上方

wrap-reverse:换行，第一行在下方。当设置换行时，还需要设置align-item属性配合自动换行。并且align-item值不能为stretch。

4.flex-flow是flex-direction和flex-wrap的简写形式。默认值为row nowrap.

5.justify-content定义项目在主轴上的对齐方式

flex-start：左对齐，默认值

flex-end：右对齐

center：区中

space-between：两端对其，项目之间间隔相等

space-around：每个项目两侧间隔相等。项目之间的间隔比项目与边框间隔大一倍。

6.align-items在交叉轴上的对齐。

flex-start：交叉轴起点对齐

flex-end：交叉轴终点对齐

center：交叉轴中线对齐

baseline：项目根据它们第一行文字基线对齐

stretch：如果项目未设置高度或auto，项目将在交叉轴方向拉伸填满整个容器，默认值。

7.align-content，定义项目多根轴线（出现换行后）在交叉轴的对齐方式。

flex-start

flex-end

center

space-between

space-around

stretch