flexbox 伸缩布局

flexbox 研究

研究flexbox需要清楚一个概念，主轴和交叉轴的概念，而这两个轴是可以交换的

flexbox的样式属性主要作用于两个部分，一个是伸缩容器，一个是伸缩子项目

容器样式

display: flex | inline-flex

设置这个属性就代表当前这个元素变成了伸缩容器，一个是块状容器，一个是行内块状容器

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

flex-direction代表主轴布局方向

row: 左－> 右 ，row-reverse: 右 -> 左 ，column：上 －> 下 ，column-reverse：下 －> 上

flex-wrap: nowrap | wrap | wrap-reverse    

flex-wrap:代表的是超出布局的元素如何显示，分别是不换行，换行，换行之后从右向左排列

flex-flow: <‘flex-direction’> || <‘flex-wrap’>    

这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。

justify-content: flex-start | flex-end | center | space-between | space-around    

主轴方向的对其方式

flex-start(默认值)：伸缩项目向一行的起始位置靠齐。

flex-end：伸缩项目向一行的结束位置靠齐。

center：伸缩项目向一行的中间位置靠齐。

space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。

space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

align-items: flex-start | flex-end | center | baseline | stretch    

定义伸缩项目交叉轴在当前行的对齐方式

flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。

center：伸缩项目的外边距盒在该行的侧轴上居中放置。

baseline：伸缩项目根据他们的基线对齐。

stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

align-content: flex-start | flex-end | center | space-between | space-around | stretch    

定义伸缩项目在伸缩容器内部的对齐方式

同上

伸缩项目样式

order: <integer>    

子元素顺序

flex-grow: <number> (默认值为： 0)

根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

flex-shrink: <number> (默认值为： 1)    

根据需要用来定义伸缩项目收缩的能力。

flex-basis: <length> | auto (默认值为： auto)    

这个用来设置伸缩基准值，剩余的空间按比率进行伸缩。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]    

这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写

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