flex布局详解

flex布局（Flexible布局，弹性布局）
两个重要的概念：
开启了flex布局的元素叫 flex container
flex container里面的直接子元素叫做 flex items
父元素开启flex布局：display:flex/inline-flex flex(块级元素)/inline-flex（行内元素）
flex container里的属性：
flex-direction
display:flex(开启flex布局)
flex-direction:（决定主轴的方向）
flex items 默认都是沿着main axis（主轴）从main start开始往main end方向排布
flex-direction决定了main axis的方向，有4个值
1,row(主轴从左到右默认值),
2,row-reverse(主轴从右向左)
3,column(主轴从上到下),
4,column-reverse(主轴从下到上)

Justify-content
Justify-content决定了flex items在main axis上的对齐方式
1，flex-start（默认值）：与main start对齐
2，flex-end：与main end对齐
3，center:居中对齐
4，space-between:flex items之间的距离相等与main start,main end两端对齐
5，space-evenly:flex items之间的距离相等，flex items与main start,main end之间的距离等于flex items之间的距离
6，space-around:flex items之间的距离相等flex items与main start,main end之间的距离是flex items之间的一半
align-items
align-items决定了flexitems在crossaxis上的对齐方式
1.normal:在弹性布局中，效果和stretch一样
2.stretch:当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
3.flex-start:与cross start对齐
4.flex-end:与cross end对齐
5.center：居中对齐
6.baseline：与基准线对齐
flex-wrap
flex-wrap决定了flex container是单行还是多行
1.nowrap（默认）单行
2.wrap：多行
1.wrap-reverse:多行（对比wrap,cross start与cross end相反 ）
align-content
align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
1.stretch（默认值）：与align-items的stretch类似
2.flex-start:与cross start对齐
3.flex-end:与cross end对齐
4.center：居中对齐
5，space-between:flex items之间的距离相等与cross start,cross end两端对齐
6，space-around:flex items之间的距离相等flex items与cross start,cross end之间的距离是flex items之间的一半
7，space-evenly:flex items之间的距离相等，flex items与cross start,cross end之间的距离等于flex items之间的距离
flex items里的属性：
order
order决定了flex items的排布顺序
可以设置任意整数（正整数，负整数，0），值越小就越排在前面，默认值是0
align-self
flex items可以通过align-self覆盖flex container设置的align-items设置
stretch,flex-start,flex-end,center,baseline效果跟align-items一致
flex-grow
flex-grow决定了flex items如何扩展
可以设置任意非负数字（正小数，正整数，0），默认值是0
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为flex container的剩余size*flex-grow÷sum
如果所有的flex items的flex-grow总和不超过1，每个flex item扩展的size为flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width/max-height
flex-shrink
flex-shrink决定了flex items如何收缩
可设置任意非负数字（正小数，正整数，0），默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为flex items超出flex container的size*sum*收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink*flex item的base size
base size就是flex item放入flex container 之前的size
flex items收缩后的最终size不能小于min-width/min-height
flex-basis
flex-basis用来设置flex items在main axis方向上的base size
auto（默认值），具体的宽度数值（100px）
决定flex items最终base size的因素，从优先级高到低
max-width/max-height/min/width/min-height
flex-basis
width/height
内容本身的size
flex
flex是flex-grow//flex-basis的简写，flex属性可以指定1个，2个或者3个值
单值语法值必须为一下其中之一
一个无单位数（number）他会被当做的值
一个有效的宽度（width）值他会被当做的值
关键字none ，auto或initial
双值语法：第一个值必须为一个无单位数，并且他会被当做的值
第二个值必须为一下之一
一个无单位数，他会被当做的值
一个有效的宽度值：他会被当做的值
三值语法
第一个值必须为一个无单位数，并且他会被当做的值
第二个值必须为一个无单位数，并且他会被当做的值
第一个值必须为一个有效的宽度值，并且他会被当做的值