弹性盒布局-----指定水平方向与垂直方向上的对齐方式

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36748278/article/details/54021016

首先介绍弹性盒布局中的一些术语的意思


main-axis:进行布局时作为布局基准的轴,在横向布局时为水平轴,在纵向布局时为垂直轴

main-start/main-end:进行布局时的起点和终点。在横向布局时为容器的左端和右端,在纵向布局时为容器的顶端和底端。

cross-axis:与main-axis垂直相交的轴,在横向布局时为垂直轴,在纵向布局时为水平轴。

cross-start/cross-end:cross-axis的起点和终点。在横向布局时为容器的顶端和底端,在纵向布局时为容器的左端和右端。

将flex-wrap属性值指定为wrap且进行横向多行布局时,按从cross-start到cross-end方向,即从上往下布局。

将flex-wrap属性值指定为wrap-reverse且进行横向多行布局时,按从cross-end到cross-start方向,即从下往上布局。





justify-content属性(针对main-axis轴)

1、指定如何布局容器中除了子元素之外的main-axis轴(横向布局时,main-axis轴方向为水平方向,纵向布局时main-axis轴方向为垂直方向)方向上的剩余空白部分。

2、当flex-grow属性值不为0时,各子元素在main-axis轴方向自动填满容器,所以justify-content属性值无效


justify-content属性值如下:

flex-start:从main-start开始布局所有子元素(默认值)

flex-start:从main-end开始布局所有子元素

center:居中布局所有子元素

space-between:将第一个元素布局在main-start处,将最后一个元素布局在main-end处,将空白部分平均分配在所有子元素与子元素之间

 space-around:将空白部分平均分配在以下几处,如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间


justify-content的不同属性值所产生的不同效果如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="urf-8">
	<title>mao bo li</title>
	<style>
		#container{
			display:flex;
			flex-direction:row;
			justify-content:flex-start;
			
			border:solid 5px blue;
			width:600px;
			height:50px;
		}
		#text-a{
			background-color:orange;
			width:100px;
		}
		#text-b{
			background-color:yellow;
			width:150px;
		}
		#text-c{
			background-color:limegreen;
			width:200px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="text-a">示例文字A</div>
		<div id="text-b">示例文字B</div>
		<div id="text-c">示例文字C</div>
	</div>
</body>
</html>


1、属性值为flex-start

2、属性值为flex-end


3、属性值为center


4、属性值为space-between


5、属性值为space-around





align-items属性(针对cross-axis轴)

指定如何布局容器中除了子元素之外的cross-axis轴(横向布局时,cross-axis轴方向为水平方向,纵向布局时cross-axis轴方向为垂直方向)方向上的剩余空白部分。


align-items属性值如下:

flex-start:从cross-start开始布局所有子元素(默认值)

flex-start:从cross-end开始布局所有子元素

center:居中布局所有子元素

space-between:

如果子元素的布局方向与容器的布局方向不一致,则该值的作用等效于flex-start属性值的作用
如果子元素的布局方向与容器的布局方向保持一致,则所有子元素的内容沿基线对齐

 space-around:同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度,则所有子元素高度被调整为最接近容器高度


  
展开阅读全文

没有更多推荐了,返回首页