弹性盒子的属性~

弹性盒子

1.如果一个普通元素想成为弹性盒子元素，只需要给元素添加display:flex;

2.弹性盒子基本上是添加给父元素的，为的是让其中的子元素可以按照弹性盒子的规则进行布局，如果子元素中还有孙子元素需要按照弹性盒子的规则进行布局，那么子元素也要采用弹性盒子（添加display:flex;）

3.如果父元素添加了display:flex;属性，那么子元素中float,clear等属性无效

display: flex;

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex-direction: row;

/*

默认水平显示 row

如果改成垂直显示，垂直方向不够，等比例压缩

flex-direction: row | row-reverse | column | column-reverse;

row(横向，起点在左端)

*/

flex-wrap: nowrap;

/*水平方向换行方式，默认nowrap（不换行），如果显示不开，等比例压缩

flex-wrap: nowrap | wrap | wrap-reverse（换行，第一行在下方）;

*/

justify-content: 定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

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

align-items: 子元素的垂直对齐方式

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

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

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

注意：stretch属性的使用要求子元素没有默认高度

order：

用来决定子元素的排列顺序，越小越靠前

flex-shrink:1;

/*空间不足时的压缩比例，默认为1，等比例压缩。如果一个元素不想等比例压缩，只需要给这个元素设置为0*/

/*flex-grow: 0;*/

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

/*剩余空间的分配比例，默认为0，不分配

  值越大，分配的比例越多*/

flex-basis:800px;

/*定义元素的基础宽度，如果还有剩余空间则所有元素均分剩余空间

如果空间不够，则等比例压缩其他元素*/

align-self属性（垂直方向）允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;