Flex 布局

最新推荐文章于 2024-11-16 17:16:31 发布

fed_jiao

最新推荐文章于 2024-11-16 17:16:31 发布

阅读量155

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： css

本文链接：https://blog.youkuaiyun.com/jiaojiao51290/article/details/90667663

javascript 专栏收录该内容

21 篇文章

订阅专栏

博客围绕CSS展开，但具体内容缺失，推测可能涉及CSS的各类特性、应用场景等信息技术相关内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex</title>
	<style>
		body,html{
			margin: 0;
			padding: 0;
		}
		/*
			-----box-----
			flex-direction: row| row-reverse | column | column-reverse;
			flex-wrap: nowrap | wrap | wrap-reverse;
			flex-flow: row nowrap;   <flex-direction><flex-wrap>
			justify-content: flex-start | flex-end | center | space-between | space-around;
			align-items: flex-start | flex-end | center | baseline | stretch;
			align-content: flex-start | flex-end | center | space-between | space-around | stretch;
		*/
		/*
			-----item----
			order: <integer> | 0; //项目的排列顺序，数值越小，排列越靠前，默认为0
			flex-grow: <number> | 0; //项目的放大比例，如果存在剩余空间，也不这大。
			flex-shrink: <number> | 1; //项目的缩小比例，如果空间不足，该项目将缩小。
			flex-basis: <length> | auto; //在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。auto 项目的本来大小。
			flex: none | [<'flex-grow'><'flex-shrink'> ? || <'flex-basis'>];
			align-self: auto | flex-start | flex-end | center | baseline | stretch;
		*/
		.box{
			width: 80%;
			margin: 0 auto;
			background: #000;
			display: flex;
			/*flex-direction: row-reverse;*/
			/*-webkit-flex-direction: column-reverse;
			-moz-flex-direction: column-reverse;
			-ms-flex-direction: column-reverse;
			-o-flex-direction: column-reverse;
			flex-direction: column-reverse;*/
			/*flex-wrap: wrap-reverse;*/
			justify-content: space-between;
			align-items: baseline;
			align-content: center;
		}
		.boxPub{
			width: 100px;
			/*height: 100px;*/
			text-align: center;
		}
		.box1{
			background-color: pink;
			height: 50px;
		}
		.box2{
			background-color: red;
			height: 100px;
		}
		.box3{
			background-color: green;
			height: 180px;
		}
		.box4{
			background-color: orange;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="boxPub box1">aade rwefs vvwjkluyib</div>
		<div class="boxPub box2">btuyfnd asfwr fasfrt fgyt</div>
		<div class="boxPub box3">cadf ew adfe wfa</div>
		<div class="boxPub box4">d234 afwe af fa afa</div>
	</div>
</body>
</html>