传统的布局方案是基于盒模型,依赖于display:block和float+position,但是对于一些特殊的布局来说就不是很方便,如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案,flex弹性盒布局,目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局,用来为盒模型提供最大的灵活性。 任何一个容器(标签)都可以指定为flex布局。用display:flex;
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴:水平的主轴(main axis)和垂直交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后,这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex;将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列(从左向右)
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)
column :纵向排列。
column-reverse:反转纵向排列,从下往上排,最后一项排在最上面
3.内容对齐(justify-content)属性应用在 弹性容器 上,把弹性项沿着弹性容器的主轴线(main axis)对齐
justify-content:flex-start 默认,左对齐(图1)
justify-content:flex-end 右对齐(图2)
justify-content:center 居中对齐(图3)
justify-content:space-between 两端对齐,中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items(交叉轴对齐方式)
flex-start:顶端对齐
flex-end:底对齐
center:垂直居中对齐
baseline:项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器(注:子元素不能设置高)
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
nowrap:flex容器为单行。该情况下flex子项可能会溢出容器
wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse:反转 wrap 排列。
图1(nowrap)注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2(wrap)
图3(warp-reverse)
容器单行或者多行方式
6、align-content(行与行之间对齐方式)
当伸缩容器的侧轴还有多余空间时,本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式,这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注:本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐,中间自动分配
space-around自动分配距离
flex 大致分为两类属性:容器属性和项目属性(容器内部项目的属性)。flex 属性( flex:1 )如就给容器内部项目设置的属性。
这里的 wrap 指容器,item 我们称作项目。我们还需要知道 flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。接下来我们逐一介绍这三个属性:
flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值,则所有项目将获得相同的可用空间份额,否则将根据定义的不同比率进行分配。
从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194,加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度,如果我们给它们加上 width 会怎么计算呢?
我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194,加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢?仔细看定义后知道,我们给 wrap 设置了 width 为 200px,三个 item 设置了 50px,所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例,而不是分配后元素自身的比例。
设置项目的收缩比例,如果空间不足,该项目将缩小。
默认值为 1。
设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间。
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。