html弹性盒子布局,div+css3弹性盒子(flex box)布局

一、CSS3 弹性盒子(Flex Box)

弹性盒子是CSS3的一种新布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

首先要明白几个概念：

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为main start 和main end。

交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start和 cross end。

设置了 display: flex 的父元素被称之为 flex 容器(flex container)。

在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)元素。

概念释义

二、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性

Basic support (single-line flexbox)

29.0 21.0 -webkit-

11.0

22.0 18.0 -moz-

6.1 -webkit-

12.1 -webkit-

Multi-line flexbox

29.0 21.0 -webkit-

11.0

28.0

6.1 -webkit-

17.0 15.0 -webkit- 12.1

三、CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1

2

3

4

5

6

弹性盒子布局自动一行填满且不随浏览器大小而变化

四、CSS3 弹性盒子常用属性

属性

描述

flex-direction

指定弹性容器中子元素排列方式

flex-wrap

设置弹性盒子的子元素超出父容器时是否换行

flex-flow

flex-direction 和 flex-wrap 的简写

align-items

设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式

align-content

修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

justify-content

设置弹性盒子元素在主轴(横轴)方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

flex-direction: row | row-reverse | column | column-reverse;

四种方向row | row-reverse | column | column-reverse

属性值

值

描述

row

默认值。元素将水平显示，正如一个行一样。

row-reverse

与 row 相同，但是以相反的顺序。

column

元素将垂直显示，正如一个列一样。

column-reverse

与 column 相同，但是以相反的顺序。

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示，正如一个行一样。

row-reverse 与 row 相同，但是以相反的顺序。

column 元素将垂直显示，正如一个列一样。

column-reverse 与 column 相同，但是以相反的顺序*/

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1

2

3

4

5

6

flex-direction:column;结果

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值

描述

nowrap

默认值。规定元素不拆行或不拆列。

wrap

规定元素在必要的时候拆行或拆列。

wrap-reverse

规定元素在必要的时候拆行或拆列，但是以相反的顺序。

flex-wrap: nowrap | wrap | wrap-reverse;

可以取三个值：

(1) nowrap (默认)：不换行。

nowrap

(2)wrap：换行，第一行在上方。

wrap

(3)wrap-reverse：换行，第一行在下方。

wrap-reverse

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*flex-direction:column;*/

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示，正如一个行一样。

row-reverse 与 row 相同，但是以相反的顺序。

column 元素将垂直显示，正如一个列一样。

column-reverse 与 column 相同，但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列，但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1

2

3

4

5

6

flex-wrap:wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示，正如一个行一样。

row-reverse 与 row 相同，但是以相反的顺序。

column 元素将垂直显示，正如一个列一样。

column-reverse 与 column 相同，但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列，但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1

2

3

4

5

6

flex-direction:column;flex-wrap:wrap;

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

/* flex-flow: */

flex-flow:column wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

/*

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

flex-flow:

例：flex-flow:row wrap;

* * */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1

2

3

4

5

6

flex-flow:row wrap;

4. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

值

描述

flex-start

默认值。项目位于容器的开头。

flex-end

项目位于容器的结尾。

center

项目位于容器的中心。

space-between

项目位于各行之间留有空白的容器内。(两端对齐，项目之间的间隔都相等)

space-around

项目位于各行之前、之间、之后都留有空白的容器内。(每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.)

分布图

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;*/

/*justify-content:space-around;*/

/*

flex-start 默认值。项目位于容器的开头。

flex-end 项目位于容器的结尾。

center 项目位于容器的中心。

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内

*/

}

.item{width: 100px; height: 200px;}

.item1-1{ background:red;height: 100px}

.item1-2{ background:orange;width: 300px;}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1

2

3

4

5

6

默认 justify-content: flex-start;

justify-content:flex-end

justify-content:flex-end;

justify-content:center

justify-content:center;

justify-content:space-between; /*两端对齐，项目之间的间隔都相等。*/

justify-content:space-between;两端对齐，项目之间的间隔都相等

justify-content:space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-content:space-around;每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.

5. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

值

描述

stretch

默认值。项目被拉伸以适应容器。

center

项目位于容器的中心。

flex-start

项目位于容器的开头。

flex-end

项目位于容器的结尾。

baseline

项目位于容器的基线上。

image

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items: stretch;

/*

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

stretch(默认值)：如果项未设置高度或设为auto，将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1

2

3

4

5

6

默认align-items: stretch;如果项未设置高度或设为auto，将占满整个容器的高度

align-items:flex-start;

align-items:flex-start;交叉轴的起点对齐

align-items:flex-end;

align-items:flex-end;交叉轴的终点对齐

align-items:center;

align-items:center;交叉轴的中点对齐

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:baseline;

/*

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

stretch(默认值)：如果项未设置高度或设为auto，将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;} /* 修改文字开始的位置 通过padding来修改*/

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1

2

3

4

5

6

align-items:baseline;项目的第一行文字的基线对齐

align-content 定义了多根轴线的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

值

描述

flex-start

与交叉轴的起点对齐。

flex-end

与交叉轴的终点对齐。

center

与交叉轴的中点对齐。

space-between

与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around

每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值)

轴线占满整个交叉轴。

align-content 多根轴线的对齐方式

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

align-content: stretch;

/*

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值)：轴线占满整个交叉轴。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; }

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1

2

3

4

5

6

1

2

3

4

5

6

默认align-content:stretch;

align-content:flex-start;

align-content: flex-start;

align-content: flex-end;

align-content: flex-end;

align-content:center;

align-content: center;

align-content:space-between;

align-content: space-between;与交叉轴两端对齐，轴线之间的间隔平均分布。

align-content:space-around;

align-content:space-around;每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

五、flex-item项的常用属性(弹性子元素属性)

属性

描述

order

设置弹性盒子的子元素排列顺序。

flex-grow

设置或检索弹性盒子元素的扩展比率。

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis

用于设置或检索弹性盒伸缩基准值。

flex

设置弹性盒子的子元素如何分配空间。

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

数值越小，排列越靠前，默认为0。

order: ;

：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

数值越小，排列越靠前

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; order: 6;}

.item1-2{ background:orange;width: 300px;height: auto;order: 5;}

.item1-3{ background:yellow;width: 100px;order: 0;}

.item1-4{ background:green;width: 100px;order: 3;}

.item1-5{ background:cyan;width: 100px;order: 2;}

.item1-6{ background:blue;width: 100px;order: 1;}

1

2

3

4

5

6

order分别设置为 6 5 4 0 3 2 1

2. flex-grow属性

flex-grow: ;

：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

按照设置数字比例进行拉伸，默认为0，即如果存在剩余空间，也不放大。

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px; flex-grow:1}

.item1-2{ background:orange;height: auto;flex-grow:5}

.item1-3{ background:yellow;flex-grow:1}

.item1-4{ background:green;flex-grow:1}

.item1-5{ background:cyan;flex-grow:1}

.item1-6{ background:blue;flex-grow:1}

1

2

3

4

5

6

flex-grow 属性设定分别为 1 5 1 1 1 1

3. flex-shrink属性

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认为1，即如果空间不足，该项目将缩小。负值对该属性无效

flex-shrink: ;

：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

如果设置为0不进行收缩，值越大收缩越多。

flex-shrink 设置分别为 1 0 1 1 1 1 1 1

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 400px; height: 200px;flex-shrink:1}

.item1-1{ background:red;height: 100px; }

.item1-2{ background:orange;height: auto;flex-shrink:2}

.item1-3{ background:yellow;flex-shrink:3}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1

2

3

4

5

6

flex-shrink 设置分别为 1 2 3 1 1 1 值越大缩放比例越大

4. flex-basis属性

flex-basis: | auto;

：一个长度单位或者一个百分比，规定元素的初始长度。

auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

默认值为auto，即项目的本来大小。也可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

值

描述

flex-grow

一个数字，规定项目将相对于其他元素进行扩展的量。

flex-shrink

一个数字，规定项目将相对于其他元素进行收缩的量。

flex-basis

项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

auto

与 1 1 auto 相同。

none

与 0 0 auto 相同。

initial

设置该属性为它的默认值，即为 0 1 auto。

inherit

从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

}

值

描述

auto

默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

stretch

元素被拉伸以适应容器。

center

元素位于容器的中心。

flex-start

元素位于容器的开头。

flex-end

元素位于容器的结尾。

baseline

元素位于容器的基线上。

initial

设置该属性为它的默认值。

inherit

从父元素继承该属性。

可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

改变子元素的align-items

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:flex-start;

/*

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

stretch(默认值)：如果项未设置高度或设为auto，将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px; align-self:flex-end}

1

2

3

4

5

6

align-items:flex-start; align-self:flex-end;