认识flex布局
一.flex布局是目前web开发中使用最多的布局方案:
1.flex布局(Flexible布局,弹性布局)
2.目前特别在移动端用的特别多,目前pc端也使用越来越多
二.两个重要概念:
1.开启了flex布局的元素叫做flex container
2.flex container 里面直接子元素叫做flex items
三.设置display属性为flex 或者 inline-flex 可以成为flex container
1.flex: flex container 以block-level形式存在
2.inline-flex: flex container 以 inline-level形式存在
四.flex cotainer的属性:
1.flex-direction:决定主轴的方向;默认值是row
值一. 默认值是row表示主轴从左到右
值二. row-reverse;表示反向,即:主轴从右到左
值三. column;这个单词的意思是列;用在这里表示主轴方向是从上到下的
值四. column-reverse;表示反向,主轴方向从下到上
2.Justify-content;决定了 flex item 在main axis(主轴) 上的对齐方式;有如下值:
值一. flex-start(默认值);与main start(主轴开始方向)对齐
值二. flex-end 表示与main end(主轴结束位置)对齐
值三 .center表示居中对齐
值四. space-between √ flex items(直接子元素)之间的距离相等
√ 与main start mian end 两端对齐
值五 .space-evenly ✔ flex items 之间的距离相等
✔ flex start main end 之间的距离等于flex items之间的距离
值六. space-around ✔ flex items 之间距离相等
✔ flex items 与 main start mian end 之间的距离是flex items之间距离的一半
以上对齐方式如下图:
3.align-items 决定了flex item 在cross axis(交叉轴)上的对齐方式
值一. normal 在弹性布局中,效果和stretch一样
值二. stretch 当flex item 在cross axis 方向的size 为auto时,会自动拉伸至填充flex cotainer
值三. flex-start 与cross start对齐
值四. flex-end 与cross end对齐
值五. center 居中对齐
值六. baseline 与基准线对齐
以上对齐方式如下图:
4.flex-wrap 决定了 flex container 是单行还是多行
值一. nowrap(默认) 单行
值二. wrap 多行
值三. wrap-reverse 多行(对比 wrap, cross start, 与 cross end 相反)
以上显示如下图:
5.align-content 决定了多行flex item 在cross axis上的对齐方式,用法与justify-content类似
值一. stretch(默认值); 与align-items 的strech类似
值二. flex-start 表示与cross start对齐
值三. flex-end 表示与cross end 对齐
值三. center 表示居中对齐
值四. space-between:
✔flex items 之间的距离相等
✔与cross start, cross end两端对齐
值五. space-around:
✔flex items 之间距离相等
✔flex items 与 cross start, cross end 之间的距离是flex items之间距离的一半
值六. space-evenly:
✔flex items 之间距离相等
✔flex items 与 cross start, cross end 之间距离等于flex items之间的距离
五. flex items中的属性:
1.order 决定flex items的排布顺序
可以设置任意整数(正整数, 负整数, 0), 值越小就越排在前面
默认值是0
2.align-self 可以通过align-self覆盖flex-container 设置的align-items
auto(默认值) 遵从 flex container 的 align-items 设置
stretch, flex-start, flex-end, center, baseline, 效果跟align-items一致
3.flex-grow 决定flex items如何扩展
可以设置任意非负数字(正小数, 正整数, 0), 默认值0
当flex containe r在 main axis 方向上有剩余 size 时, flex-grow属性才会生效
如果所有 flex items 的 flex-grow 总和 sum 超过 1, 每个 flex items 扩展的 size 为:
flex container 的剩余 size*flex-grow / sum
如果所有的 flex items 的 flex-grow 总和不超过 1, 每个 flex items 扩展的 size 为:
flex container 的剩余 size*flex-grow
注意:flex items 扩展的最终 size 不能超过 max-width \ max-height
4.flex-shrink 决定了flex items 如何收缩
可以设置任意非负数字(正小数, 正整数, 0), 默认值1
当flex items 在 main axis 方向上超过了 flex container 的 size, flex-shrink 属性才会生效
如果所有 flex items 的 flex-shrink 总和 sum 超过 1, 每个 flex items 收缩的 size 为:
flex items 超出 flex container 的 size*收缩比例 / 所有 flex items 的收缩比例之和
如果所有的 flex items 的 flex-shrink总和不超过 1, 每个 flex items 收缩的 size 为:
flex items 超出 flex container 的 size *sum*收缩比例 / 所有 flex items 的收缩比例之和
收缩比例 = flex-shrink*flex items 的base size
base size 就是 flex items 放入flex container之前的size
注意:flex items 收缩的最终 size 不能小于 min-width \ max-height
3.flex-basis 用来设置 flex items 在 main axis 方向上的base size
auto (默认值) 具体的宽度数值(10px)
决定 flex items 最终 base size 的因素, 从优先级高到低
max-width \ max-height \ min-width \ min-height
flex-basis
width \ height
内容本身的size
4.flex 是 flex-grow || flex-shrink || flex-basis 的简写, flex属性可以指定1个, 2个或者3个值
