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

Posted Fiki515

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第二节 弹性盒子（ justify-content属性align-items属性flex-direction属性flex-wrap属性）相关的知识，希望对你有一定的参考价值。

一、弹性盒子的定义

弹性盒子（ 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>

弹性盒子

弹性盒子 flex

    弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

  flex 常用属性

  • justify-content;设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
  • flex-wrap;设置弹性盒子的子元素超出父容器时是否换行。

  • align-content:当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式

   justiffy-content 属性

　　　　space-between：两端对齐中间均分

　　　　center：居中

　　　　flex-start：起点对齐

　　　　flex-end：终点对齐

语法

div
{
    display: flex;
    justify-content: space-between;
}

　　flex-wrap属性

　　　　nowrap：默认值 不换行

　　　　wrap：换行  第一行在上

　　　　wrap-reverse：换行  第一行在下 

语法

div{

display:flex;
flex-wrap: wrap;
}

　　align-content属性

　　　　center：中心对齐

　　　　flex-start：起点对齐

　　　　flex-end：终点对齐

语法

div
{
    display: flex;
    align-content:center；
}

　　

以上是关于第二节 弹性盒子（ justify-content属性align-items属性flex-direction属性flex-wrap属性）的主要内容，如果未能解决你的问题，请参考以下文章

弹性盒子

0507-弹性盒子

弹性盒子flex布局

css3 弹性盒子

弹性盒子FlexBox简介

弹性盒子布局属性详解