弹性盒子

来自CloudWiki
跳转至： 导航， 搜索

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

flex弹性盒模型，是一种代替float的解决方案。尤其在移动端，使用非常方便，（移动端设备尺寸各种各样，微信小程序）

考察形式客观题，掌握概念，

弹性盒模型的语法基础概念

  • 任何一个容器都可以指定弹性布
  • 设置 flex 布局以后，子元素的 float,clear,vertical-align 等样式全部失效
  • display:flex;或 display:inline-flex;

弹性父元素属性

 
        display:flex;
	flex-direction: row|row-reverse|column| column-reverse指定了弹性子元素在父容器中的位置。
	juestify-content:flex-start|flex-end|center|space-between| space-around 水平对齐方式
	align-items:flex-start | flex-end | center | baseline | stretch 垂直对齐方式
	flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
	align-content:当flex-wrap起作用发生换行时，该属性控制每行的对齐方式

弹性子元素属性

order:num 数值小的排在前面。可以为负值 flex 属性用于指定弹性子元素如何分配空间

源代码

<!DOCTYPE html>
<html>
<head>
	<title>弹性盒子</title>
	<meta charset="utf-8">
	<style>
		body,ul{
			margin:0;
			padding:0;
		}
		ul{
			list-style: none;
		}
		.box{
			width: 100%;
			padding:50px 0;
			background-color: #ccc;
		}
		.box .main{
			width: 1200px;
			height:500px;
			margin:0 auto;
			display: flex;
			background-color: yellow;
			flex-direction:row;
		}
		.box .main li{
			width: 300px;
			height:200px;
			line-height: 200px;
			text-align: center;
			font-size: 30px;
			background-color: pink;
			margin:10px;
		}
		/*.box .main li:nth-child(4){
			order:-1;
		}
		.box .main li:nth-child(1){
			order:3;
		}*/
		
		.box .main li:nth-child(2){
			flex:1;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="main">
			<li>1</li>
			<li>2</li>
		</ul>
	</div>
取自“http://www.openbrains.net/mediawiki/index.php?title=弹性盒子&oldid=15232”