Flex布局

Flex布局

应用在flex-container的css属性

(1)flex-flow：是flex-direction || flex-wrap的简写

flex-flow:row wrap;

(2)flex-direction：主轴方向

flex-item 默认是沿着main axis(主轴)从main start 开始往 main end方向排布

flex-direction:row;//从左到右
flex-direction:row-reverse;//从右到左
flex-direction:column;//从上到下
flex-direction:column-reverse;//从下到上

(3)flex-wrap：决定flex-item是否全部在同一行显示,默认是在一行显示

flex-wrap:nowrap;//不换行，默认
flex-wrap:warp;//换行

(4)justify-content：决定了flex-item在主轴的对齐方式

justify-content:flex-start;//在main start 对齐
justify-content:flex-end;//在main end对齐
justify-content:center;//居中对齐
justify-content:space-between;//flex-itme之间的距离相等,与main start和main end 两端对齐
justify-content:space-evenly;//flex-item之间的距离相等,flex-item与main start 和main end之间的距离等于flex-item之间的距离
jsutify-content:space-around;//flex-item之间的距离相等，flex-item与main start和main end之间的距离是flex-item之间距离的一半

flex-start

flex-end
center

space-between

space-evenly
space-around

(5)align-items：决定了flex-item在交叉轴上的对齐方式

//这两种情况是在flex-item在交叉轴上面没有设置高度或者大小的时候出现的
align-items:normal;//在弹性布局中效果和stretch一样
align-items:stretch;//当flex-item在交叉轴上面的大小为auto的时候，会拉伸至填充flex-container

normal和stretch在交叉轴上面没有设置大小

//当flex-item在交叉轴上面的高度或大小不一样的时候
align-items:flex-start;//在交叉轴的cross start对齐
align-items;flex-end;//在交叉轴的 cross end对齐
align-items:center;//在交叉轴的中心点对齐
align-items:baseline;//基线对齐

flex-start
flex-end

center

baseline

(6)align-content:决定了多行flex items在cross axios上的对齐方式，用法和justify-content类似

align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-around;
align-content:space-evenly;
align-content:space-between;

flex-start
flex-end
center
space-between
space-evenly

space-around

应用在flex-item的css属性

(1)flex:是flex-grow||flex-shrink||flex-basis的简写，flex属性可以指定1个，2个或三个值

（1）单个语法值：值必须为一下其中之一：
Number：是flex-grow的值
width：flex-basis的值
关键字none，aoto，initial
（2）双值语法：
第一个无单位数值：flex-grow的值
第二个：
一个无单位数值：flex-shrink的值
一个有效的宽度值：flex-basis的值
（3）三值语法
无单位数：flex-grow的值
无单位数：flex-shrink的值
有效宽度值：flex-basis的值

(2)flex-grow:决定了flex items如何扩展

（1）可以设置任意的整数,值越小就越排在前面，默认值是0
     当flex container在main axis方向上剩余size时，flex-grow属性才会有效
（2）如果所有的flex items的flex-grow总和sum超过1，每个flex item扩展为：
     flex container的剩余size*flex-grow/sum(main axis剩余的size*[每一个item的flex-grow的值/全部item的flex-grow的总和])
（3)如果所有的flex items的flex-grow总和不超过1，每一个flex item扩展size为
	 flex container的剩余size*flex-grow
 (4)flex items扩展后的最终size不能超过max-width/max-height

(3)flex-basis:用来设置flex items在main axis方向上的base size

（1）auto默认值,具体的宽度数值(100px)
（2）决定flex items最终base size的因素,从优先级高到底
		max-width\max-height\min-width\min-height
		flex-basis
		wdth\height
		内容本身的size

(4)flex-shrink:决定了flex items如何收缩

(1)可以设置任意的非负数字,默认值是1;
(2)当flex items在main axis方向上超过了flex container的size ，flex-shrink属性才会有效
(3)如果所有的flex items的flex-shrink的总和超过1每个flex item收缩的size为
	flex item超出flex container的size*收缩比例/所有flex items的收缩比例之和
(4)如果所有的flex items的flex-shrink总和sum不超过一，每个flex item收缩的比例为
	flex items超出flex container的size*sum*收缩比例/所有flex items的收缩比例之和
	收缩比例=flex-shrink * flex item的base size
(5)base size就是flex item放入flex container之前的size
(6)flex items收缩后的最终size不能小于min-width/min-height

(5)order:决定了flex items的排布顺序

可以设置任意的整数,值越小就越排在前面，默认值是0

.item1{
	order:10
}
.item2{
	order:9
}

(6)align-self：可以通过align-self:覆盖flex container设置的align-items