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

<!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>
移动端flex布局 父项-子项 常见属性

猜你喜欢

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