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
}