flexbox布局

前言

博主前端小白，正在通过看视频学习前端，这次关于flexbox布局的相关知识点来源于b站up CodingStartup，原视频链接在下方。
https://www.bilibili.com/video/BV1qJ411N7TA

设定display:container表示该元素为flex container，其中的元素为flex item，以下从这两方面分析它们的属性。

flex container

flex-direction

flex-directon 定义在它里面的flex items的排序方向，它的预设值为row，除此之后还有column,row-reverse,column-reverse.

当flex-direction:row则主轴为row，交叉轴为column

justify-content&align-items

justify-content是设定主轴的排序方向
align-items是设定交叉轴的排序方向
值可以取center,flex-end,flex-start，space-around,space-between等

flex-wrap

flex-wrap是指会不会分行的意思，预设值是nowrap即当一行的flex-item的数量多到超出flex-box的宽时，每个item会变窄

如果设定flex-wrap:warp则会换行

flex-flow（flex-direction+flex-wrap)

flex-flow只是flex-direction与flex-wrap组合起来的缩写。
flex-flow:column wrap 即 flex-direction:column，flex-wrap:wrap

align-content

它是用于设定当多于一行flex items时，行同行之间的对齐方式

flex item

order

用于调整flex item 的排序位置，将方块C样式设定order:1，因为oder预设值是0，按从小到大排列，所以C方块在最后，若设定order:-1，则C方块就会排在最前

align-self

用于覆写flex container 的 align-items设定
比如我们已将align-items设定为center，如上图，先向C方块样式添加align-self:flex-end，就会变成下图显示的样子

flex-basis

用于设定flex-item的主轴方向的大小的。
当flex-direction的设定值是row时，即横向是主轴，所以flex-basis的设定值=设定flex item的宽度。
当flex-direction的设定值是column时，即纵向是主轴，所以flex-basis的设定值=设定flex item的高度。
在设定flex-basis后原来的宽度或高度的设定会失效。

flex-grow

是指当flex container主轴方向有剩余空间的时候，flex item沿主轴方向扩大的设定。
flex-grow预设值为0。
如下图，有120px的剩余空间

现在box加上flex-grow:1这个设定，然后可以发现三个item都扩大了，占满了主轴的方向。
原理是三个box各占剩余空间120px中的一份，这样每个box就像主轴方向扩大了40px

然后在box B设定flex-grow:3，其余维持一份，这样120px剩余空间就会被分为5份，box B占其中3份。

flex-shrink

flex-shrink与flex-grow相反，是指当flex item 主轴方向的大小总和超出了flex container的时候，flex item沿主轴方向怎样缩小的设定。
flex-shrink预设值为1。
如下图，三个item仍然在container中，但宽度被缩小了。

当在.box中设定flex-shrink:0时，代表当主轴方向空间不足时都不会缩小对应的flex item，
如下图。

当在.A，.B，.C内加上flex-shrink:1的设定，意思是A,B,C各自分担一份被缩小的空间（30px，原先box的宽度均为90px，90乘以1/3）
当设定.B中flex-shrink：3，则意味着B方块会缩小3/5份（90*3/5=54px）,如下图

flex

它其实是flex-grow，flex-shrink，flex-basis组合起来的缩写。
当在.box中设定flex: 1 1 auto，意味着设定flex-grow:1，flex-shrink:1，flex-basis:auto，
即flex item会按照flex container的宽度平均分配空间去扩大或缩小，flex-container有剩余空间时同步扩大，flex-container没有足够空间时同步缩小。
当设定flex:0 1 150px，意味着每个item最大宽度为150px（主轴为row），不会因为flex container有剩余空间时扩大，但会因为没有足够空间而缩小。

flex:0 0 200px 意味着每个item固定宽度为200px，不扩大也不缩小。