弹性盒子布局（下面有代码）

最新推荐文章于 2024-06-14 09:42:20 发布

请叫我小黑灬

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量1.7k

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/xbl_001/article/details/111303963

版权

弹性盒子布局

语法：display:flex（设置弹性盒）

属性：

flex-direction：决定主动方向

  row：默认值，水平方向，起点在左端
  row-reverse：主轴为水平方向，起点在右端
  column：主轴为垂直方向，起点在上
  column-reverse：主轴为垂直方向，起点在下

flex-wrap：是否在一行显示

  nowrap：默认，不换行
  wrap：换行，第一行在上方显示
  wrap-reverse：换行，第一行在下方显示

flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值是row nowrap。

justity-content：定义了项目在主轴上的对齐方式

  flex-start：默认值，左对齐
  flex-end：右对齐
  centet：居中
  space-between：两端对齐，项目之间的间隔都相等
  space-around：每个项目两侧的间隔相等，所以，项目之间的间隔与项目与边框的间隔大一倍

align-items：定义项目在交叉轴上如何对其

  flex-start：交叉轴的起点对齐
  flex-end：交叉轴的终点对齐
  center：交叉轴的中心点对齐
  baseline：项目的第一行文字的基线对其
  stretch：如果项目未设置高度或设置auto,将占满整个容器的高度

------------------------------------html-------------------------------------

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/tanXingHeZiBuJu.css" type="text/css"/>
	</head>
	<body>
		<h1>弹性盒子布局</h1>
		<p>语法：display:flex（设置弹性盒）</p>
		<h3>flex-direction：决定主动方向</h3>
		<p>row：默认值，水平方向，起点在左端</p>
		<div class="box div_1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>row-reverse：主轴为水平方向，起点在右端</p>
		<div class="box div_2">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>column：主轴为垂直方向，起点在上</p>	
		<div class="box div_3">
			<div class="item">1</div>
			<div class="item">2</div>
		</div>
		<p>column-reverse：主轴为垂直方向，起点在下</p>	
		<div class="box div_4">
			<div class="item">1</div>
			<div class="item">2</div>
		</div>
		<h3>flex-wrap：是否在一行显示</h3>
		<p>nowrap：默认，不换行</p>
		<div class="box div_5">
			<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>
		<p>wrap：换行，第一行在上方显示</p>
		<div class="box div_6">
			<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>
		<p>wrap-reverse：换行，第一行在下方显示</p>
		<div class="box div_7">
			<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>
		<h3>
			flex-flow：属性是flex-direction属性和flex-wrap属性的
			简写形式，默认值是row nowrap。
		</h3>
		<h3>justity-content：定义了项目在主轴上的对齐方式</h3>
		<p>flex-start：默认值，左对齐</p>
		<div class="box div_8">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>flex-end：右对齐</p>
		<div class="box div_9">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>centet：居中</p>
		<div class="box div_10">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>space-between：两端对齐，项目之间的间隔都相等</p>
		<div class="box div_11">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>space-around：每个项目两侧的间隔相等，所以，项目之间的间隔与项目与边框的间隔大一倍</p>
		<div class="box div_12">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<h3>align-items：定义项目在交叉轴上如何对其</h3>
		<p>flex-start：交叉轴的起点对齐</p>
		<div class="box div_13">
			<div class="item">1</div>
			<div class="item item_2">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>flex-end：交叉轴的终点对齐</p>
		<div class="box div_14">
			<div class="item">1</div>
			<div class="item item_2">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>center：交叉轴的中心点对齐</p>
		<div class="box div_15">
			<div class="item">1</div>
			<div class="item item_2">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>baseline：项目的第一行文字的基线对其</p>
		<div class="box div_16">
			<div class="item">1</div>
			<div class="item item_2">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<p>stretch：如果项目未设置高度或设置auto,将占满整个容器的高度</p>
		<div class="box div_17">
			<div class="item">1</div>
			<div class="item item_4">2</div>
			<div class="item">3</div>
			<div class="item item_3">4</div>
		</div>
	</body>
</html>

---------------------------------css------------------------------

body{
	background: gainsboro;
	max-width: 1200px;
	/*border: red solid;*/ 
	margin: 0 auto;
}
h1,h2,h3,h4{
	color:#5A5D63;
}
h1{
	border-bottom: 2px solid #808080;
}
p{
	color: white;
	background: #262626;
	font-size: 20px;
	height:60px;
	line-height: 60px;
	padding-left: 20px;
	border-radius: 10px;
}
.box{
	background: white;
	display: flex;
 	text-align: center;
 	font-size: 30px;
}
.item{
	width: 150px;
	height: 150px;
	background: orange;
	margin: 10px;
	color: white;
	line-height: 160px;
}
.div_1{
	/*默认值，水平方向，起点在左端*/
	flex-direction: row;
}
.div_2{
	/*row-reverse：主轴为水平方向，起点在右端*/
	flex-direction: row-reverse;
}
.div_3{
	/*column：主轴为垂直方向，起点在上*/
	flex-direction: column;
}
.div_4{
	/*column-reverse：主轴为垂直方向，起点在下*/
	flex-direction: column-reverse;
}
.div_5{
	/*nowrap：默认，不换行*/
	flex-wrap: nowrap;
}
.div_6{
	/*wrap：换行，第一行在上方显示*/
	flex-wrap: wrap;
}
.div_7{
	/*wrap-reverse：换行，第一行在下方显示*/
	flex-wrap: wrap-reverse;
}
.div_8{
	/*flex-start：默认值，左对齐*/
	justity-conernt:flex-start;
}
.div_9{
	/*flex-end：右对齐*/
	justify-content:flex-end;
}
.div_10{
	/*centet：居中*/
	justify-content: center;
}
.div_11{
	/*space-between：两端对齐，项目之间的间隔都相等*/
	justify-content: space-between;
}
.div_12{
	/*space-around：每个项目两侧的间隔相等，所以，项目之间的间隔与项目与边框的间隔大一倍*/
	justify-content: space-around;
}
.item_2{
	height: 200px;
}
.div_13{
	/*flex-start：交叉轴的起点对齐*/
	align-items: flex-start;
}
.div_14{
	/*flex-end：交叉轴的终点对齐*/
	align-items: flex-end;
}
.div_15{
	/*center：交叉轴的中心点对齐*/
	align-items: center;
}
.div_16{
	/*baseline：项目的第一行文字的基线对其*/
	align-items: baseline;
}
.div_17{
	/*stretch：如果项目未设置高度或设置auto,将占满整个容器的高度*/
	align-items: stretch;
}
.item_3{
	height: 300px;
}
.item_4{
	height: auto;
}

请叫我小黑灬

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
弹性盒子布局（下面有代码）

弹性盒子布局（下面有代码）语法：display:flex（设置弹性盒）属性：flex-direction：决定主动方向 row：默认值，水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上 column-reverse：主轴为垂直方向，起点在下flex-wrap：是否在一行显示 nowrap：默认，不换行 wrap：换行，第一行在上方显示 wrap-reverse：换行，第一行在下方显示flex-f
复制链接

扫一扫