html弹性盒⼦布局,div+css3弹性盒⼦（flexbox）布局
⼀、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;
html的flex布局* 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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。