第二节弹性盒子（ justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）

Fiki515

已于 2022-03-24 09:54:07 修改

阅读量1.4w

点赞数 10

文章标签： html5 前端 html css3 css

于 2022-03-23 22:14:02 首次发布

本文链接：https://blog.csdn.net/Fiki515/article/details/123689272

版权

一、弹性盒子的定义

弹性盒子（ Flexible Box 或 flexbox）：CSS3的一种新布局模式。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

二、flex-direction属性：决定主轴的方向（即项目的排列方向）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
             width: 500px;
			height: 500px;
			background-color: #E83E78;
            display: flex;
            /*flex-direction: row;               水平方向，起点在左边;
            flex-direction: row-reverse;         水平方向，起点在右边;
            flex-direction: column;              垂直方向，起点在上边;
            flex-direction: column-reverse;      垂直方向，起点在下边。
            */
        }
        .box .box1{
				width: 200px;
				height: 200px;	
		}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
		}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
		}
			.box .box1:nth-of-type(3){
				background-color: #00f;
	    }
    </style>
    <title>弹性盒子</title>
</head>
<body>
<div class="box">
    <div class="box1">项目1</div>
    <div class="box1">项目2</div>
    <div class="box1">项目3</div>
</div>
</body>
</html>

三、flex-wrap属性：

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap（默认）：不换行；
wrap：换行，第一行在上方；
wrap-reverse：换行，第一行在下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box{
				display: flex;
				width: 500px;
				height: 500px;
				background-color: #E83E78;
            /*flex-wrap: nowrap;        不换行;
              flex-wrap: wrap;          换行，第一行在上方;
              flex-wrap: wrap-reverse;  换行，第一行在下方。*/

        }
        .box .box1{
			width: 200px;
			height: 200px;	
		}
		.box .box1:nth-of-type(1){
			background-color: #FFC0CB;
		}
		.box .box1:nth-of-type(2){
			background-color: #f0f;
		}
		.box .box1:nth-of-type(3){
			background-color: #00f;
		}
		.box .box1:nth-of-type(4){
			background-color: #ff0;
		}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

四、flex-flow属性：

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；

五、justify-content属性：定义了项目在主轴上的对齐方式。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

       .box{
			display: flex;
			width: 500px;
			height: 500px;
			background-color: #E83E78;
          
            /*justify-content: flex-start;       左对齐;
            justify-content: flex-end;         右对齐;
            justify-content: center;           居中;
            justify-content: space-between;    两端对齐，项目之间的间隔都相等;
            justify-content: space-around;     每个项目两侧的间隔相等。
*/

        }

        .box .box1{
				width: 200px;
				height: 200px;	
			}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
			}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
			}
			.box .box1:nth-of-type(3){
				background-color: #00f;
			}
			.box .box1:nth-of-type(4){
				background-color: #ff0;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

六、align-items属性：定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：与交叉轴的中点对齐;
stretch（默认值）：轴线占满整个交叉轴。
baseline 与第一行文字基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

       .box{
			display: flex;
			width: 500px;
			height: 500px;
			background-color: #E83E78;
            align-items: flex-start;          交叉轴的起点对齐；
            align-items: flex-end;            交叉轴的终点对齐；
            align-items: center;              与交叉轴的中点对齐；
            align-items: stretch;             轴线占满整个交叉轴
            align-items: baseline             与第一行文字基线对齐
        }

       .box .box1{
				width: 200px;
				height: 200px;	
			}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
			}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
			}
			.box .box1:nth-of-type(3){
				background-color: #00f;
			}
			.box .box1:nth-of-type(4){
				background-color: #ff0;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

七、align-content属性：定义了多根轴线的对齐方式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

       .box{
			display: flex;
			width: 500px;
			height: 500px;
			background-color: #E83E78;
            align-content: flex-start;          交叉轴的起点对齐；
            align-content: flex-end;            交叉轴的终点对齐；
            align-content: center;              与交叉轴的中点对齐；
            align-content: space-between;       与交叉轴两端对齐，轴线之间的间隔平均分布；
            align-content: space-around;        每根轴线两侧的间隔都相等
            align-content: stretch;             轴线占满整个交叉轴
        }

       .box .box1{
				width: 200px;
				height: 200px;	
			}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
			}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
			}
			.box .box1:nth-of-type(3){
				background-color: #00f;
			}
			.box .box1:nth-of-type(4){
				background-color: #ff0;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

Fiki515

关注

10
点赞
踩
75

收藏

觉得还不错? 一键收藏
2
评论
第二节弹性盒子（ justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）

一、弹性盒子的定义弹性盒子（ Flexible Box 或 flexbox）：CSS3的一种新布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。二、 justify-content属性：决定主轴的方向（即项目的排列方向）row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿。<!D.
复制链接

扫一扫