css3 flex 实现常见页面布局

＊且听风吟

已于 2022-08-30 11:36:57 修改

阅读量605

点赞数 1

分类专栏： # CSS 文章标签： css3 css javascript

于 2019-12-10 20:36:45 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/103482552

版权

css3 flex 实现常见页面布局

上中下布局
左中右三列布局
圣杯布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局： .box{display:flex;}
行内元素也可以使用Flex布局： .box{display:inline-flex;}
Webkit内核的浏览器，必须加上-webkit前缀： .box{display:-webkit-flex;/* Safari */display:flex;}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

上中下布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>flex 布局</title>
	<style type="text/css">
		*{
   
			padding:0;
			margin:0;
		}
		header{
     		
			height:200px;
  			background:#C4DFEB;
		}
		footer{
   
  			height:200px;
  			background:pink;
		}
		.container{
   
  			display:flex;
  			display: -webkit-flex;
  			flex-direction:column;
  			height:100vh;
		}
		main{
   
			flex-grow:1;
		}
	</style>
</head>
<body>