2021-04-25

最新推荐文章于 2024-09-14 15:26:51 发布

lhl3094140242

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量65

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/lhl3094140242/article/details/116118299

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

flex布局
Flex:容器

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: space-between/flex-start/flex-end/space-around;定义项目在主轴的对齐方式
space-between：两端对齐
flex-start：从主轴的开始位置开始排列
flex-end：从主轴的结束位置开始排列
center：居中
space-around：拉手对齐/环绕对齐

flex-wrap: 决定项目换行
nowrap：默认值，不换行；
wrap：换行显示
wrap-reverse：反向换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 800px;
				height: 300px;
				border: 1px solid red;
				margin: auto;
				display: flex; /* 设置为flex布局 */
				/* 主轴上的操作 */
				/* flex-direction: 设置主轴方向; */
					/* row:从左往右,默认值;
					row-reverse:从右往左;
					column:从上往下;
					column-reverse:从下往上; */
				flex-direction: row;
				/* flex-wrap: 换行;
					nowrap:不换行,默认值;
					 wrap：换行;
					 wrap-reverse:反转换行*/
				flex-wrap: nowrap;
				/* justify-content: 主轴上的排列方式; */
				/* flex-start:从主轴的开始位置开始排列 */
				/* flex-end:从主轴的结束位置开始排列 */
				/* center:居中显示 */
				/* space-around:环绕对齐 拉手对齐 */
				justify-content: space-between; /* 两端对齐 */
				/* flex-flow: flex-direction和flex-wrao的复合写法*/
				flex-flow: row wrap;
				/* 交叉轴上的操作 */
				/* align-items: 设置交叉轴的方向;
					flex-start:交叉轴的开始位置;
					flex-end:交叉轴的结束位置;
					center:居中 */
				align-items: flex-start;
				/* 多条主轴 */
				/* 多条轴线的对齐方式 */
				align-content: space-between;
				/* flex-start:从主轴的开始位置开始排列 */
				/* flex-end:从主轴的结束位置开始排列 */
				/* center:居中显示 */
				/* space-around:环绕对齐 拉手对齐 */
				/* space-between:两端对齐 */
			}
			li{
				width: 200px;
				height: 50px;
				color: white;
				border: 1px solid aqua;
				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>
		</ul>
	</body>
</html>