CSS3-flex弹性伸缩盒布局

lrw
109 阅读1分钟

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

起步

设置弹性伸缩盒布局(默认水平排列)

display: flex;

设置方向： row 水平 | row-reverse 水平反向 | column 垂直| column-reverse 垂直反向

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: columncolumn-reverse;

1.png

设置主轴对齐： flex-start 行头紧挨 | flex-end 行尾紧挨 | center 居中 | space-between 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点 | space-around 均匀排列每个元素,每个元素周围分配相同的空间 | space-evenly 均匀排列每个元素,每个元素之间的间隔相等

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;

2.png

设置交叉轴: flex-start 底部对齐 | flex-end 底部对齐 | center 居中

align-items: flex-start;
align-items: flex-end;
align-items: center;

3.png

设置换行: nowrap 默认 | wrap 换行 | wrap-reverse 换行反向

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

4.png

参考代码 效果图如上

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex弹性伸缩盒布局</title>
	<style>
	 	* {
	 		margin: 0;
	 		padding: 0;
	 	}
		.wrap {
			width: 300px;
			height: 1500px; 
			margin: 0 auto;
			/*height: 600px;*/
			/*border: 1px solid #f00;*/
			
		}
		.dire {
			background-color: #ccc;
		}
		.dire-row {
			display: flex;
			flex-direction: row;
		}
		.dire-row-r {
			display: flex;
			flex-direction: row-reverse;
		}
		.dire-column {
			
			flex-direction: column;
		}
		.dire-column-r {
			display: flex;
			flex-direction: column-reverse;
		}
		.just {
			background-color: #ccc;
		}
		.just-s {
			display: flex;
			justify-content: flex-start;
		}
		.just-e {
			display: flex;
			justify-content: flex-end;
		}
		.just-c {
			display: flex;
			justify-content: center;
		}
		.just-sa {
			display: flex;
			justify-content: space-around;
		}
		.just-sb {
			display: flex;
			justify-content: space-between;
		}
		.just-se {
			display: flex;
			justify-content: space-evenly;
		}
		.align {
			width: 100%;
			height: 60px;
			background-color: #ccc;
		}
		.align-s {
			display: flex;
			align-items: flex-start;
		}
		.align-e {
			display: flex;
			align-items: flex-end;
		}
		.align-c {
			display: flex;
			align-items: center;
		}
		.flex-n {
			display: flex;	
			flex-wrap: nowrap;
		}
		.flex-w {
			display: flex;	
			flex-wrap: wrap;
		}
		.flex-w-r {
			display: flex;	
			flex-wrap: wrap-reverse;
		}
		.item {
			width: 20%;
			height: 100px;
			background-color: pink;
			/*border: 1px solid red;*/
			box-sizing: border-box;
		}
		.item-item{
			width: 30px;
			height: 30px;
			background-color: pink;
			/*border: 1px solid red;*/
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<p>flex-direction: row;</p>
		<div class="dire dire-row">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>flex-direction: row-reverse;</p>
		<div class="dire dire-row-r">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>flex-direction: column;</p>
		<div class="dire dire-column">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>flex-direction: column-reverse;</p>
		<div class="dire dire-column-r">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>justify-content: flex-start;</p>
		<div class="just just-s">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>justify-content: flex-end;</p>
		<div class="just just-e">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>justify-content: center;</p>
		<div class="just just-c">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>justify-content: space-around;</p>
		<div class="just just-sa">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>justify-content: space-between;</p>
		<div class="just just-sb">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>justify-content: space-evenly;</p>
		<div class="just just-se">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>align-items: flex-start;</p>
		<div class="align align-s">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>align-items: flex-end;</p>
		<div class="align align-e">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>align-items: flex-center;</p>
		<div class="align align-c">
			<div class="item-item">1</div>
			<div class="item-item">2</div>
			<div class="item-item">3</div>
		</div>
		<p>flex-wrap: nowrap;</p>
		<div class="flex-n">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
			<div class="item">7</div>
			<div class="item">8</div>
			<div class="item">9</div>
			<div class="item">10</div>
		</div>
		<p>flex-wrap: wrap;</p>
		<div class="flex-w">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
			<div class="item">7</div>
			<div class="item">8</div>
			<div class="item">9</div>
			<div class="item">10</div>
		</div>
		<p>flex-wrap: wrap-reverse;</p>
		<div class="flex-w-r">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
			<div class="item">7</div>
			<div class="item">8</div>
			<div class="item">9</div>
			<div class="item">10</div>
		</div>
	</div>
</body>
</html>
avatar
文章
阅读
粉丝