CSS Flex布局学习总结

参考博客:阮一峰-Flex 布局教程:语法篇

参考博客:阮一峰-Flex 布局教程:实例篇

 

Flex全程为Flexiable Box,翻译为“弹性布局”。传统的页面布局主要由 display+position+float,Flex布局是新提出的布局解决方案。

Flex布局主要有四个概念,即容器、项目、主轴、交叉轴

CSS Flex布局学习总结

父元素称为“容器”,子元素称为“项目”,横轴为“主轴”,纵轴为“交叉轴”。

 

使用一下HTML代码进行学习实验

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">

			.box-style {
				width: 500px;
				height: 500px;
				background: #7dcee9;
			}

			.item-style {
				width: 100px;
				height: 100px;
				background: #ff4900;
				text-align: center;
				line-height: 100px;
			}

			.box {
				display: flex; /* 子元素为行内元素使用,inline-flex  */
			}

			.item {

			}

			.box div:nth-of-type(1) {
				background: #ff9b73;
			}

		</style>
	</head>
	<body>

		<div class="box box-style">
			<div class="item item-style">1</div>
			<div class="item item-style">2</div>
			<div class="item item-style">3</div>
			<div class="item item-style">4</div>
			<div class="item item-style">5</div>
		</div>

	</body>
</html>

CSS Flex布局学习总结

 

容器的属性

容器(父元素)的属性可以决定项目(子元素)如何排列、是否换行、对齐方式

flex-duration定义项目的排列方式(主轴or交叉轴),默认值为row(主轴正方向)

CSS Flex布局学习总结

CSS Flex布局学习总结

 

flex-wrap定于项目是否换行,默认值为nowrap(不换行)。若项目的总宽度超出容器的宽度,会对每一个项目的宽度进行等比例缩小

新增一个

<div class="item item-style">6</div>

CSS Flex布局学习总结

 

上图中的“6”项目不是紧跟着上一行,如何解决这个问题?

最上面提到,容器中含有主轴的概念,当没有换行时,容器只有一根主轴,换行之后,容器拥有两条主轴,需要定义主轴的对齐方式

align-content多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用

CSS Flex布局学习总结

还有两个值,baseline、stretch不做演示,具体用法考考 阮一峰-Flex 布局教程:语法篇

 

justify-content属性定义了项目在主轴上的对齐方式,默认值为flex-start(左对齐)

项目只剩保留前三个

<div class="item item-style">1</div>
<div class="item item-style">2</div>
<div class="item item-style">3</div>

CSS Flex布局学习总结

CSS Flex布局学习总结

 

align-items属性定义项目在交叉轴上如何对齐

CSS Flex布局学习总结

还有两个值,baseline、stretch不做演示,具体用法考考 阮一峰-Flex 布局教程:语法篇

 

项目的属性

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

 

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

.box-style {
	margin: 100px;
	width: 500px;
	height: 500px;
	background: #7dcee9;
}

.item-style {
	width: 100px;
	height: 100px;
	background: #ff4900;
	text-align: center;
	line-height: 100px;
}

.box {
	display: flex;
}

.box div:nth-of-type(1) {
	background: #ff9b73;
}

<div class="box box-style">
	<div class="item item-style">1</div>
	<div class="item item-style">2</div>
	<div class="item item-style">3</div>
</div>

CSS Flex布局学习总结

左图中剩余空间200px,第一个项目使用剩余的200px进行等比例放大,项目一width:100px + 200px / 2 * 2 = 300px

 

CSS Flex布局学习总结

项目一等比例放大的值为2,项目二、三则为1,项目一width:100px + 200px / 4 * 2 = 200px

项目二、三的width:100px + 200px / 4 * 1 = 150px

 

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-shrink为0,当空间不足时,改项目不缩小,负值则无效。

 

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

 

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

 

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

CSS Flex布局学习总结

 align-self: auto | flex-start | flex-end | center | baseline | stretch;

;