display：flex

贵哥的编程之路

发布于 2020-10-28 15:50:38

1.1K0

发布于 2020-10-28 15:50:38

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding: 0px;margin: 0px;}
		ul
		{
			list-style: none;
			width: 600px;
			border: 1px solid red;
			margin: 100px auto;
			display: flex;
		}
		ul>li
		{
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			font-size: 30px;
			background: red;
		}
		ul>li:nth-child(2)
		{
			background: green;
		}
		ul>li:nth-child(3)
		{
			background: blue;
		}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*默认情况下,主轴是水平方向的,默认是从左到右的排列的.
		但是可以通过属性来修改.
		flex-direction
		属性值有:;
		 row:默认的,从左到右的排列;
		 row-reverse:与row相反的,起点在右边,终点在左边 从右至左的排版;
		 column:起点在顶部,终点在底部从上至下的排版;
		 column-reverse:相反的,起点在底部,终点在顶部,从下至上的排版;
		*/
		*{padding: 0px;margin: 0px;}
		ul
		{
			list-style: none;
			width: 600px;
			border: 1px solid red;
			margin: 100px auto;
			display: flex;
			flex-direction: column-reverse;

		}
		 ul>li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background: red;
        }
        ul>li:nth-child(2){
            background: green;
        }
        ul>li:nth-child(3){
            background: blue;
        }
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*默认情况下,主轴是水平方向的,默认是从左到右的排列的.
		但是可以通过属性来修改.
		flex-direction
		属性值有:;
		 row:默认的,从左到右的排列;
		 row-reverse:与row相反的,起点在右边,终点在左边 从右至左的排版;
		 column:起点在顶部,终点在底部从上至下的排版;
		 column-reverse:相反的,起点在底部,终点在顶部,从下至上的排版;
		*/
		*{padding: 0px;margin: 0px;}
		ul
		{
			list-style: none;
			width: 600px;
			border: 1px solid red;
			margin: 100px auto;
			display: flex;
			/*justify-content: flex-start; 主轴上伸缩项对齐的默认值
            注意点: 在设置对齐方式的时候一定要理解两步操作
            1.按照主轴起点对伸缩项进行排版
            2.按照指定的对齐方式对齐排版好的伸缩项
            */
           flex-direction: row;
           /*justify-content: flex-start;/*默认的*/
          /* justify-content: flex-end;/*主轴方向是默认的,然后是对齐方式是到end的地方左往右的对齐把.*/
			/*justify-content: center;/*左往右,center在中间*/
			/*justify-content: space-between;/*是元素与元素的中间有空格.用所有空间的减去所有元素的宽,在除以2就是每一个空格的宽度了*/
			justify-content: space-around;/*是开始与结束都有空格,是中间空格的1/2*/
		}
		 ul>li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background: red;
        }
        ul>li:nth-child(2){
            background: green;
        }
        ul>li:nth-child(3){
            background: blue;
        }
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</body>
</html>