flex布局

最新推荐文章于 2023-06-16 14:25:52 发布

人心善变CTE

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/RXSB_12/article/details/116118021

版权

main axis:水平的主轴
cross axis:垂直的交叉轴
main start:主轴的开始位置       cross start:交叉轴的开始位置
main end:主轴的结束位置         cross end:交叉轴的结束位置


项目默认沿主轴排列
单个项目占据的主轴空间：main size
单个项目占据的交叉轴空间：cross size

flex-direction: row/row-reverse/column/column-reverse;改变主轴;
				row:默认值,从左到右;
				row-reverse:从右到左;
				column:从上到下;
				column-reverse:从下到上;

				justify-content:定义项目在主轴的对齐方式
justify-content:space-between/flex-start/flex-end/space-around/center;
space-between：两端对齐。
flex-start:从主轴的开始位置开始排列
flex-end:从主轴的结束位置开始排列
center:居中
space-around:拉手对齐，环绕对齐

flex-wrap:决定项目换行（超过盒子本身大小时换）。
nowrap:默认值，不换行；
wrap:换行显示
wrap-reverse:反转换行

display:方向
row:行
column:列
reverse:反转
space:空间
around:
环绕
flex-flow:flex-direction和flex-wrap的复合写法



                                  交叉轴上的操作:
				align-items:设置交叉轴的方向;
				flex-start:交叉轴开始位置;
				flex-end:交叉轴结束位置;
				center:居中; 
/* 多条主轴
				多条主轴线的对齐方式 */
				align-content: space-between;
				/* space-between：两端对齐。
				flex-start:从主轴的开始位置开始排列
				flex-end:从主轴的结束位置开始排列
				center:居中
				space-around:拉手对齐，环绕对齐 */





<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			ul{
				width:1000px;
				height:300px;
				border:1px solid red;
				margin:auto;
				display:flex;/* 设为布局 */
				/* 主轴上的操作 */
				flex-direction:row; /* row:默认值 */
				/* 换行 */
				flex-wrap:nowrap;
				justify-content:space-between;
				flex-flow:row wrap;/*flex-flow:flex-direction和flex-wrap的复合写法*/
				/* 交叉轴上的操作:
				align-items:设置交叉轴的方向;
				flex-start:交叉轴开始位置;
				flex-end:交叉轴结束位置;
				center:居中; */
				align-items:flex-start;
				/* 多条主轴
				多条主轴线的对齐方式 */
				align-content: space-between;
				/* space-between：两端对齐。
				flex-start:从主轴的开始位置开始排列
				flex-end:从主轴的结束位置开始排列
				center:居中
				space-around:拉手对齐，环绕对齐 */
:			}
			li{
				width:180px;
				height:50px;
				border:1px solid #FFFFFF;
				background-color:darkred;
				text-align:center;
				line-height:50px;
				list-style:none;/* 去掉无序列表前的小黑点 */
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我的音乐</li>
			<li>个人中心</li>
			<li>看点</li>
			<li>首页</li>
			<li>发现</li>
			<li>喜欢</li>
		</ul>
	</body>
</html>

在这里插入图片描述