弹性盒布局display:flex详解

一:弹性盒子

随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果。本文介绍的就是一种实现这种变化的比较简单的模型:弹性盒子。

二:属性

首先要给父容器设置display:flex(或者inline-flex)属性,就可以让该父容器的布局方式变为弹性盒模型,接着,给父容器或者子元素设置不同属性来实现具体布局。

①:给父容器添加的属性

1.flex-direction:属性决定主轴的方向(即项目的排列方向)。
   row(默认值):主轴为水平方向,起点在左端。
   row-reverse:主轴为水平方向,起点在右端。
   column:主轴为垂直方向,起点在上沿。
   column-reverse:主轴为垂直方向,起点在下沿。

2.flex-wrap:如果一条轴线排不下,如何换行.
   nowrap(默认):不换行。当父容器宽度不够时每个item会被适当挤压。当父容器宽度过大时不会拉伸。
   wrap:换行,第一行在上方。
   wrap-reverse:换行,第一行在下方。

例:css样式

nowrap:

<style type="text/css">
 #div{
	display: flex;
	flex-wrap: nowrap;
	width: 400px;
	height: 200px;
	background-color: blue;
 }
 .div{
	width: 150px;
	height: 100px;
	background-color: red;
	text-align: center;
	line-height: 100px;
 }
</style>

HTML结构:

<div id="div">
	<div class="div">a</div>
	<div class="div">b</div>
	<div class="div">c</div>
	<div class="div">d</div>
</div>

结果:

四个子div宽度被压缩成了100px。

wrap:换行,第一行在上方:

将css样式中#div里的flex-wrap: nowrap改为flex-wrap: wrap;

依次上下排列。

wrap-reverse:换行,第一行在下方:

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

4.justify-content:justify-content属性定义了项目在主轴上的对齐方式。
   flex-start(默认值):左对齐
   flex-end:右对齐
   center: 居中
   space-between:两端对齐,项目之间的间隔都相等。(首位项目分别在父容器最左、最右)
   space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。(首尾项目与父容器边界有间隔。)

例:css样式

<style type="text/css">
	#div{
		display: flex;
		justify-content: flex-start;
		width: 400px;
		height: 200px;
		background-color: blue;
	}
	.div{
		width: 50px;
		height: 100px;
		background-color: red;
		text-align: center;
		line-height: 100px;
	}
</style>

HTML:同上。

flex-start(默认值):左对齐。

flex-end:右对齐。

center: 居中。

space-between:两端对齐,项目之间的间隔都相等。

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

5.align-items:属性定义项目在交叉轴上如何对齐。
  flex-start:交叉轴的起点对齐。
  flex-end:交叉轴的终点对齐。
  center:交叉轴的中点对齐。
  baseline: 项目的第一行文字的基线对齐。(与项目行高,字体等会影响每行的基线)
  stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

例:css样式

<style type="text/css">
		#div{
			display: flex;
			align-items: flex-start;
			width: 450px;
			height: 200px;
			background-color: blue;
		}
		.div{
			width: 150px;
			height: 50px;
			background-color: red;
			text-align: center;
			line-height: 50px;
		}
</style>

注:主轴默认水平方向,交叉轴默认垂直方向。

HTML同上。

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

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

center:交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。(与项目行高,字体等会影响每行的基线)

注:为使效果更明显,本图中为父容器添加了flex-wrap: wrap;属性使其项目换行。

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

注:本图中删掉了项目的高。

6.align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
   flex-start:与交叉轴的起点对齐。
   flex-end:与交叉轴的终点对齐。
   center:与交叉轴的中点对齐。
   space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
   space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
   stretch(默认值):轴线占满整个交叉轴。

例:css样式

<style type="text/css">
	#div{
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		width: 400px;
		height: 200px;
		background-color: blue;
	}
	.div{
		width: 150px;
		height: 50px;
		background-color: red;
		text-align: center;
		line-height: 50px;
	}
</style>

注:本属性需要项目换行,因此要在父容器中加入flex-wrap: wrap;属性。

HTML同上。

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

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

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

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

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

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

注:本效果同样需要删除项目的高度属性。

②子元素的属性

1.order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

例:css样式

<style type="text/css">
	#div{
		display: flex;
		width: 400px;
		height: 200px;
		background-color: blue;
	}
	.div{
		width: 150px;
		height: 50px;
		background-color: red;
		text-align: center;
		line-height: 50px;
	}
	.div1{
		order: 3;
	}
	.div2{
		order: 1;
	}
	.div3{
		order: 0;
	}
	.div4{
		order: 2;
	}
</style>

HTML:

<div id="div">
	<div class="div div1">a</div>
	<div class="div div2">b</div>
	<div class="div div3">c</div>
	<div class="div div4">d</div>
</div>

结果:

如上图:如上通过order对项目实现了排序。

2.flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
   如果所有项目的flex-grow属性都为1,
   则它们将等分剩余空间(如果有的话)。
   如果一个项目的flex-grow属性为2,其他项目都为1,
   则前者占据的【剩余空间】将比其他项多一倍。

例:对.div做了改动,删掉了.div1,.div2,.div3,.div4的css样式。将子元素的flex-grow属性统一设为0.

.div{
	width: 50px;
	height: 50px;
	background-color: red;
	text-align: center;
	line-height: 50px;
	flex-grow: 0;
}

将flex-grow属性统一设为1:

单独将div1设为2:

.div1{
	flex-grow: 2;
	background-color: yellow;
}

为显示明显,将其背景颜色改为黄色。

如上,div1比其余项目都大。

3.flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
   如果所有项目的flex-shrink属性都为1,
   当空间不足时,都将等比例缩小。
   如果一个项目的flex-shrink属性为0,
   其他项目都为1,则空间不足时,前者不缩小。
   负值对该属性无效。

例:

.div{
	width: 150px;
	height: 50px;
	background-color: red;
	text-align: center;
	line-height: 50px;
	flex-shrink: 1;
}

单独将div1的flex-shrink改为0:

.div1{
	flex-shrink: 0;
	background-color: yellow;
}

如图,div1没有缩小。

4.flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

浏览器根据这个属性,计算主轴是否有多余空间。

它的默认值为auto,即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

例:

.div{
	width: 50px;
	height: 50px;
	background-color: red;
	text-align: center;
	line-height: 50px;
}
.div1{
	background-color: yellow;
	flex-basis: 200px;
}

如图,div1在主轴上占据了200px的宽度,其余都是原宽度。

5.flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
   该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

6.align-self:定义单个item在交叉轴上的对齐方式,可以覆盖父容器的align-item对齐方式。
   默认为auto。表示继承父容器。

以上就是弹性盒模型的全部内容。

时间: 05-19

弹性盒布局display:flex详解的相关文章

弹性盒布局(flex)

一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box{ display: flex; } 行内元素也可以使用 Flex 布局. .box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit前缀. .box{ display: -webkit-flex; /* Safari */ display: flex; }

CSS3盒模型display:box详解

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-).一.box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分htm

深入理解 CSS3 弹性盒布局模型

Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最重要的一环就是布局.需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.这也使得布局的逻辑变得更加复杂.本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求.它的优势在于开发人员只是声明布局应该

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

弹性布局display:flex

1.flex-direction:设置伸缩项目的排列方式,即主轴的方向 row    设置从左到右排列 row-reverse    设置从右到左排列 column    设置从上到下排列 column-reverse    设置从下到上排列 2.justify-content:调整主轴方向上的对齐方式,对于弹性盒子内元素 flex-start    伸缩项目以起始点靠齐 flex-end    伸缩项目以结束点靠齐 center    伸缩项目以中心点靠齐 space-between    伸

css3伸缩布局中justify-content详解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伸缩布局</title> <style> body { margin: 0; padding: 0; font-family: '微软雅黑'; background-color: #F7F7F7; } ul { margin: 0; pa

CSS3.0盒模型display:flex;的使用[兼容微信浏览器]

话不多说,上代码,关键在对应的低版本安卓的微信浏览器,需要-webkit-box对应的-webkit-box-orient -webkit-box-pack等的设置. .flex{ /* 设置弹性布局 */ display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */ display:-webkit-flex;/* Chrome 21+ */ display:-ms-flexbox;/* WP IE 10 */ display:flex;/* an

Flexible Box布局基础知识详解

1.基本概念,借用阮一峰老师的一张图: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end:交叉轴的开始位置叫做cross start,结束位置叫做cross end. 项目默认沿主轴排列.单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size. 2.容器的基本属性 flex-direction flex-wrap flex-flow j

css弹性盒布局

参考:https://segmentfault.com/a/1190000003978624 ul{ display: -webkit-box; display: -webkit-flex; display: flex; display: -webkit-box-flex; } li{ flex: 1; -webkit-flex: 1; -webkit-box-flex: 1; } }