CSS盒模式

最新推荐文章于 2024-08-22 11:28:48 发布

CopperDong

最新推荐文章于 2024-08-22 11:28:48 发布

阅读量424

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/QFire/article/details/83242117

版权

前端专栏收录该内容

71 篇文章

订阅专栏

CSS3内容溢出属性

CSS3伸缩布局盒模式（Flexible Box）

CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小它们以防止溢出容器。

最重要的是，Flexbox布局方向不可预知、不像常规的布局（块就是从上到下，内联就从左到右），而那些常规的适合页面布局，但对于支持大型或者复杂的应用程序（特别是涉及取向改变、缩放和收缩等）就缺乏灵活性。

伸缩流方向和换行（wrap）

主轴对齐justify-content：flex-start | flex-end | center | space-between（平均分布） | space-around（两边对称）

堆栈伸缩行align-content：

侧轴对齐align-items和align-self：

align-self用来设置单独伸缩项目在侧轴的对齐方式，可以用来覆盖该伸缩项目的伸缩容器的align-items属性。

伸缩性flex：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8"/>
	<title>shi</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.flex-container {
			width: 960px;
			margin: 20px auto;
			min-height: 300px;
			color: #fff;
			font-weight: bold;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-items: stretch;
		}
		.flex-container > div {
			padding: 10px;
		}
		.flex-container > div:nth-child(1) {
			background-color: hsla(230, 30%, 80%, .9);
			flex: 1 200px;
		}
		.flex-container > div:nth-child(2) {
			background-color: hsla(30, 80%, 10%, .9);
			flex: 2 400px;
		}
		.flex-container > div:nth-child(3) {
			background-color: hsla(100, 30%, 30%, .9);
			flex: 1 200px;
		}

	</style>
</head>
<body>
	<div class="flex-container">
		<div>Left Sidebar Content</div>
		<div>Main Content</div>
		<div>Right Sidebar Content</div>
	</div>
</body>
</html>

显示顺序flex-order