CSS3伸缩布局

html-css021

CSS3伸缩布局,第1张

我们知道,标准流中的,父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局,就可以使子元素们在不脱离标准流的情况下,水平方向上,从左至右排列

flex 布局的优势

1、flex 布局的子元素不会脱离文档流,很好地遵从了“流的特性”。

2、flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性,非常灵活,让布局的实现更佳多样化,且方便易用。

但flex 的缺点在于,它不支持低版本的 IE 浏览器。

我们来明确几个概念

弹性盒子

弹性盒子指的是使用 display:flex 或 display:inline-flex 声明的父容器。

子元素/弹性元素

子元素/弹性元素指的是父容器里面的子元素们(父元素是弹性盒子)。

使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时,这个父容器里的子元素们,会遵循弹性布局。我们一般使用display:flex。

1.flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

flex-direction:用于设置盒子中子元素的排列方向。属性值可以是:

flex-direction这个属性默认子元素从左到右排列的。

子盒子如何在父盒子里面水平对齐方式如下所示,

子盒子如何在父盒子里面垂直对齐(单行),如下所示

flex-wrap控制是否换行,如下

flex-flow是flex-direction、flex-wrap的简写形式

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex,并且设置排列方式为横向排列flex-direction:row并且设置换行,flex-wrap:wrap这样这个属性的设置才会起作用。

什么是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自动分配距离