使用flexbox来布局web应用--在页面中把一个元素居中/垂直放置一系列的容器/创建一个水平折叠的容器

随着flex布局在移动端的广泛应用，在PC端越来越广泛的支持，使用flexbox可以帮助你设计出引人注目的布局，并且在PC端或移动端能够很好的缩放。告别使用浮动的<div>布局、绝对定位和一些JavaScript hacks，使用仅仅几行CSS就可以构建出水平或垂直方向的布局。下面是本文的一些基本的使用案例：

①将一个元素放在页面的中间；

②一组在垂直方向可以一个紧挨一个的布局容器；

③创建一行按钮或者其他元素，这些元素在小屏幕中可以垂直折叠。

一、基础

如果想要元素呈水平或柱状，或如果想让元素垂直布局，在任何<div>元素中，通过设置display属性为flex来使用flexbox，然后设置它任意一行的flex-flow属性，就可以在其中创建元素了。如果正在使用水平的flexbox，并想让内容垂直换行，只需制定值为wrap。

想让某个元素使用弹性布局，就为它添加flex属性。一般情况下，将会使用下列三个值

如果想让元素仅仅使用它本身的宽度，比如按钮，则设置flex:none，none将会被解释为0 0 auto；
如果想要一个固定大小的元素，则设置flex:0 0 size，如：flex 0 0 60px;
如果想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置flex:auto ,它代表1 1 auto。

当然，还有其他的使用方法，关于flex布局，可以查看阮大神的Flex布局教程（点击打开链接）。

二、相关实例介绍

（1）在页面中把一个元素居中

在这个例子中，要做的最简单的事情就是创建两个flexbox，其中一个在另一个中。每个flexbox有三个元素：其中两个当做中间元素的垫子，另一个就是中间元素本身。

扫描二维码关注公众号，回复： 1874216 查看本文章

<div class="vertical-box">
	<div class="spacer"></div>
	<div class="centered-element horizontal-box">
		<div class="spacer2"></div>
		<div class="centered-element">Centered content</div>
		<div class="spacer2"></div>
	</div>
	<div class="spacer"></div>
</div>

.vertical-box{
	display:flex;
	height:400px;
	width:400px;
	flex-flow:column;
}
.horizontal-box{
	display:flex;
	flex-flow:row;
}
.spacer{
	flex:auto;
	background-color:#bcb9b9;
}
.spacer2{
	flex:auto;
	background-color:#e0bdbd;
}
.centered-element{
	flex:none;
	background-color:white;
}

效果图如下所示：

（2）垂直放置一系列的容器

如果你有一个带有头部区域，内容区域和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的flex属性，设置头部区域flex属性，底部区域不设置来实现自动扩展功能。

<div id="document" class="vertical-box">
	<div class="fixed-size"><button id="increase-size">Increase container size</button></div>
	<div id="flexible-content" class="flexible-size">	
	</div>
	<div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
</div>

.vertical-box{
	display:flex;
	height:400px;
	width:400px;
	flex-flow:column;
}
.fixed-size{
	flex:none;
	height:30px;
	background-color:#bcb9b9;
	text-align:center;
}
.flexible-size{
	flex:auto;
	background-color:#e0bdbd;
}

var height=400;
	document.getElementById('increase-size').onclick=function() {
		height +=10;
		if(height>500) height = 500;
		document.getElementById('document').style.height=(height + 'px');
	}

	document.getElementById('decrease-size').onclick=function() {
		height -=10;
		if(height < 300) height = 300;
		document.getElementById('document').style.height = (height + 'px');
	}

效果图如下所示：

例子通过添加JS，可以通过点击头部按钮来增加尺寸，点击底部按钮来减小尺寸，可以在保持头部和底部尺寸不变的情况下，使内容区域进行自动缩放。

（3）创建一个水平折叠的容器

在有些情况下，可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。使用flexbox可以快速实现。你通过设置flex-flow的值为wrap来实现。

<div id="container" class="horizontal-container">
		<div class="fixed-size">Element 1</div>
		<div class="fixed-size">Element 2</div>
		<div class="fixed-size">Element 3</div>
	</div>
	<button id="increase-size">Increase container size</button>
	<button id="decrease-size">Decrease container size</button>

.horizontal-container{
	display:flex;
	width:300px;
	flex-flow:row wrap;
}
.fixed-size{
	flex:none;
	width:100px;
	background-color:#e0bdbd;
	color:white;
	text-align:center;
}

var width = 300;
document.getElementById('increase-size').onclick=function() {
  width += 100;
  if (width > 300) width = 300; 
  document.getElementById('container').style.width = (width + "px");
}
document.getElementById('decrease-size').onclick=function() {
  width -= 100;
  if (width < 100) width = 100; 
  document.getElementById('container').style.width = (width + "px");
}

效果图如下所示：

例子中，通过点击Increase按钮和Decrease按钮，来显示水平布局下的变化，fixed-size的布局产生了不同的排列方式。

三、总结

如文章哪里有问题，欢迎大家留言进行指正，谢谢！

参考博客：使用flexbox来布局Web应用点击打开链接

使用flexbox来布局web应用--在页面中把一个元素居中/垂直放置一系列的容器/创建一个水平折叠的容器

猜你喜欢