弹性盒布局(flexbox)
一、弹性盒布局介绍
1)弹性盒也叫伸缩布局盒模型
它是css3引入的一种新的布局模式——flexbox**布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式,更便利于开发。
2)主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flex容器会使子项目扩展来填充可用空间,或缩小他们以防止溢出容器。
3)专业术语解释
a、主轴-水平方向或者X轴
b、侧轴-垂直方向或者Y轴
c、伸缩容器(父元素)和伸缩项目(子元素)
二、弹性盒属性
1)伸缩流方向 flex-direction 主要用来创建主轴,定义伸缩项目在伸缩容器中的方向
row:从左向右
row-reverse:与row相反
column:从上到下
column-reverse:与column相反
2)主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式
flex-start:伸缩项目向一行的起始位置靠齐
flex-end:伸缩项目向一行的结束位置靠齐
center:伸缩项目向一行的中间位置靠齐
space-between:伸缩项目会平均的分布在行里
space-around:伸缩项目会平均的分布在行里,两端保留一半的空间
3)侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式
flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边
flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边
center:伸缩项目的外边距盒 在该行的侧轴上居中放置
baseline:伸缩项目根据伸缩项目的基线对齐
stretch:伸缩项目拉伸填充整个伸缩容器
4)换行 flex-wrap
nowrap 不换行 默认值,不管超出还是不超出都不会换行
wrap 换行 一旦伸缩项目超出伸缩容器,那么就会换行
wrap-reverse 换行反向 主轴水平时,上下反向,主轴垂直时,左右反向
5)伸缩流方向属性与换行属性缩写形式 flex-flow
flex-flow:换行 伸缩方向; 两个值同时定义或者单独定义都生效,不分先后顺序
6)align-self(加在子元素上):主要用来设置单独伸缩项目在侧轴的对齐方式。注意点:align-self可以覆盖align-items
flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;(元素位于容器的开头)
flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;(元素位于容器的结尾)
center:伸缩项目的外边距盒 在该行的侧轴上居中放置;(元素位于容器的中间)
stretch:伸缩项目拉伸填充整个伸缩容器。(元素被拉伸以适应容器)
7)堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式; 往往要与换行同时应用,没有换行就不存在多行的情况
flex-start:各行向伸缩容器的起点位置堆叠;(没有行距)
flex-end:各行向伸缩容器的结束位置堆叠;(底部对其没有行距)
center:各行向伸缩容器的中间位置堆叠;(居中没有行距)
space-between:各行在伸缩容器中平均分布;(两端对齐,中间自动分配)
space-around:各行在伸缩容器中平均分布,两端保留一半的空间;(自动分配距离)
8)显示顺序 order (加在子元素上)默认状态是按照标准流的顺序排列,在flexbox模型里,可以通过order改变伸缩项目的顺序
a、不定义order的伸缩项目会排到前面
b、order:1; 排第一 order:2; 排第二
9)flex(设置在子元素上) 作用:可以让元素自动占用容器的可用空间,等比划分
flex:1;
flex:2;
...
10)flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
11)flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
12)flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)
浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。不常用,还在不断变化中。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
三、弹性盒案例
1)支付宝
2)导航
3)自适应网页
4)表单
5)网页内容区域
…