CSS3弹性盒模型的布局理解

html-css040

CSS3弹性盒模型的布局理解,第1张

什么是flex布局?

传统的布局方案是基于盒模型,依赖于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 的简写。