Flex布局让你的布局更完美

Flex布局让你的布局更完美
CSS3 Flex布局
有很多人和我一样吧，刚开始学HTML的时候用的都是传统的布局，有时用心设计的HTML+CSS样式可能由于对方的设备、浏览器的原因，导致用户浏览页面时的显示效果非常丑陋。很早之前W3C为了解决解决这个问题，提出了一种新的方案----Flex（Flexible Box）布局，也就是"弹性布局"，它可以为盒状模型提供最大的灵活性，可以适应不同的页面，就算浏览器怎么变，也不会破坏我们的样式了。不过得注意设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。下面我将大概说下flex是干嘛的。
如图我们想设计的网页样式是这样的
Flex布局让你的布局更完美

.box1{
	height: 500px;
	background: #eee;
}
.box1 div{
	width: 200px;
	height: 200px;
	background: #E49E1A;
	margin: 10px;
	float: left;
}

而用户打开的可能是这样
Flex布局让你的布局更完美
可以看到我们的样式都变了，所以我们为了避免这种情况，可以使用flex布局
如图第二行

.box2{
	height: 300px;
	background: #CFF446;
	display: flex;
}
.box2 div{
	width: 200px;
	height: 200px;
	background: #E49E1A;
	margin: 10px;
}

我们可以看到用了flex布局后，就算页面的宽度变了，样式也不会变。
flex容器的属性有6个（建议你们试一下）。
①flex-direction(决定排列方向)：row(左往右)、row-reverse(右往左)、column(上往下)、column-reverse(下往上)

.box2{
	height: 300px;
	background: #CFF446;
	display: flex;
	flex-direction: row;//row-reverse、column、column-reverse
}
.box2 div{
	width: 200px;
	height: 200px;
	background: #E49E1A;
	margin: 10px;
}

②flex-wrap：nowrap(不换行)、wrap(换行，上往下)、wrap-reverse(换行，下往上)

.box2{
	height: 300px;
	background: #CFF446;
	display: flex;
	flex-wrap: nowrap;//wrap、wrap-reverse
}
.box2 div{
	width: 200px;
	height: 200px;
	background: #E49E1A;
	margin: 10px;
}

③flex-flow（是flex-direction和flex-wrap的简写，我就懒得放代码了）
④justify-content：
flex-start(左对齐)
Flex布局让你的布局更完美
flex-end(右对齐)

center（居中）

space-between(两端对齐，间隔也相等)

space-around(每个元素两侧的间隔相等)

⑤align-items：
flex-start(交叉轴的起点对齐)

flex-end(交叉轴的终点对齐)

center(交叉轴的中点对齐)
Flex布局让你的布局更完美
baseline（元素的第一行文字的基线对齐，画歪了不必在意（づ￣3￣）づ）

stretch（如果元素未设置高度或设为auto，将占满整个容器的高度）
(下图中元素没设置高度)

⑥align-content(如果只有一根轴线，该属性不起作用)：
stretch(轴线占满整个交叉轴)
flex-start(与交叉轴的起点对齐)
flex-end(与交叉轴的终点对齐)
center(与交叉轴的中点对齐)
space-between(与交叉轴两端对齐，轴线之间的间隔平均分布)
space-around(每根轴线两侧的间隔都相等)
上面我就不演示辣，自己试下。
其实它还有6个项目(注意：不是容器)的属性：
①order
②flex-grow
③flex-shrink
④flex-basis
⑤flex
⑥align-self
我就不说了，自己找资料看下(其实是我懒辣)ಠᴗಠ！

Flex布局 让你的布局更完美

相关推荐

Flex布局让你的布局更完美