第29章 CSS3弹性伸缩布局[中]

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3弹性伸缩布局[中]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>
	<p>从技术上来说，IP（Internet Procotol，互联网协议）是一种地址协议，是互联网信息传输的规范和标准，也是互联网赖以存在的基础。现在的互联网大多是建立在IPv4这个版本的地址协议基础上，这个协议所“产生”的IP地址约有45亿个，由国际组织统一分配。简单来说，IP地址就相当于互联网设备的网络身份证，有了它，电脑、智能手机、云电视等设备才能正常上网。据测算，到2020年全球将有约500亿台联网设备，超过IPv4可供地址的10倍。</p>
	<p>对此，已经有不少科技企业开始大量囤积IP地址，但IP地址即将耗尽情况的出现还是会让那些有意在线扩展业务的美国企业面临大量损失。事实上，亚洲地区其实早在2011年就已经耗尽了IP地址，欧洲也在一年后遭遇了类似的情况，而北美地区则预计会在今夏迎来相同的状况。</p>
	<p>简单来说，IP地址之于互联网就相当于电话号码之于电话一样，这些由数字组成的IP地址不同于以结尾的这些顶级域名，因为它们仅仅是数据在互联网中传输的背后平台。</p>
</div>

</body>
</html>

style.css

@charset "utf-8";

p {
	width: 150px;
	border: 1px solid gray;
	background-color: silver;
	margin: 5px;
	padding: 5px;
}

div {
	width: 100%;
/*	display: -moz-box;
	display: -webkit-box;
	display: box;*/
	display: -ms-flexbox;

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

	/*-ms-flex-wrap: wrap;*/
	/*-ms-flex-wrap: nowrap;*/
	/*-ms-flex-wrap: wrap-reverse;*/

	/*-ms-flex-flow: row wrap;*/

	/*-ms-flex-pack: end;*/

	/*-ms-flex-align: start;*/
	/*-ms-flex-align: center;*/


}

p:nth-child(1) {
	-ms-flex: 1;
	-ms-flex-order: 3;
}
p:nth-child(2) {
	-ms-flex: 3;
	-ms-flex-order: 2;
}
p:nth-child(3) {
	-ms-flex: 1;
	-ms-flex-order: 1;
}

第29章 CSS3弹性伸缩布局[中]

猜你喜欢