移动端flex布局 父项-子项 常见属性

本文深入探讨了Flex布局,详细解释了flex-direction、justify-content、align-items和align-content等属性,并通过实例展示了如何使用这些属性实现灵活的网页布局。内容涵盖了Flex布局的基本概念、属性设置及其对子元素排列的影响,旨在帮助开发者更好地理解和应用Flex布局。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
		/* flex布局父项常见属性 */
		 div{
			 display: flex;
			 /* 设置主轴方向  row 行  column 列 
			  row-reverse 从右到左,默认从左到右
			  column-reverse 从下到上,默认从上到下
			 */
			 flex-direction: row;
			 /*justify-content 设置主轴上子元素的排列方式
			  属性值:
			   flex-start:默认值 从头部开始,如果主轴是x轴,则从左到右
			   flex-end:从尾部开始排列
			   center:在主轴居中对齐(如果主轴是x轴则水平居中)
			   space-around:平分剩余空间
			   space-between:先两边贴边 再平分剩余空间(重要)
			   
			   */
			 /* justify-content: flex-end; */
			 justify-content: space-between;
			 /* flex-wrap: 设置子元素是否换行 
			属性值:
				nowrap:不换行
				wrap:换行
			 */
			 flex-wrap: wrap;
			 
			 /* align-items:设置侧轴上的子元素的排列方式(单行)
			 属性值:
				flex-start :从上到下
				flex-end:从下到上
				center:挤在一起居中(垂直居中)
				stretch:拉伸(默认值)
			 */
			 /* align-items: center; */
			 
			 /*align-content:设置侧轴上的子元素的排列方式(多行)
			   属性值:
				flex-start:默认值在侧轴的头部开始排列
				flex-end:在侧轴的尾部开始排列
				center:在侧轴中间显示
				space-around:子项在侧轴平分剩余空间
				space-between:子项在侧轴先分布在两头,再平分剩余空间
				stretch:设置子项元素高度平分父元素高度
			   */
			 align-content: space-between;
			 /* 
			  flex-flow 属性是flex-derection和flex-wrap属性的复合属性
			  flex-flow:row wrap;
			  */
			 height: 500px;
			 width: 300px;
			 background-color: red;
		 }
		 /* flex布局子项常见属性 */
		 div span{
			 /* flex 属性定义子项目分配剩余空间,用flex来表示占多少份数 */
			 /* flex:<份数>;默认为0 */
			 /* align-self 控制子项自己在侧轴上的排列方式 
			 可覆盖align-items属性,默认值auto,表示继承父元素的align-items,若没有父元素,则等同于stretch
			 */
			 /* order: 属性定义项目的排列顺序,数值越小,排列越靠前,默认是0; 
			 tips:与z-index不一样
			 */
			 width: 100px;
			 height: 100px;
			 background:pink;
			 margin-left: 5px;
			 margin-top: 5px;
			 
		 }
		</style>
	</head>
	<body>
		<div id="">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值