H5C3-day04

1 flex 常见父项属性

1.felx-firection  设置主轴上的方向
2.justify-content 设置主轴上的子元素排列方式
3.flex-wrap       设置子元素是否换行
4.align-content   设置侧轴上的子元素的排列方式（多行）
5.align-items     设置侧轴上的排列方式（单行）
6.flex-flow       复合属性   相当于同时设置了flex-direction和flex-wrap

1.1 flex-direction 确定主轴方向

       div{
			/* 给父元素添加flex属性 */
			display: flex;
			width: 600px;
			height: 300px;
			background-color: red;
			/* 默认主轴是 x 轴 row  从右往左 那么y轴就是侧轴*/
			/* 元素是跟着主轴来排列的 */
			flex-direction: row;
			/* 翻转 */
			flex-direction: row-reverse;
			/* 我们可以把y轴设置成主轴 column  那么x轴就是侧轴 */
			flex-direction: column;
			flex-direction: column-reverse;
		}
		div span {
			width: 100px;
			height: 100px;
			background-color: blue;
		}

1.2 justify-content 主轴子项排列方式

justify-content 设置  主轴上的  子元素排列方式 
注意 使用该属性时一定要  确定好  主轴是哪一个 
            /* 属性值 

flex-start  默认从头部开始  如果主轴是x轴  则从左到右
flex-end    从尾部开始排列
center      在主轴中对齐（如果主轴是x轴则水平居中）
space-around 平均剩余空间
space-between先两边贴边 再平分剩余空间（重要）
 

			div{
				/* 父元素添加  弹性布局   flex属性  */
				display: flex;
				width: 1000px;
				height: 300px;
				background-color: green;
				/* 默认主轴方向是 x 轴 */
				flex-direction: row;
				/* flex-direction: column; */
				 /*宽高不变  子元素超过父元素宽高  会压缩子元素  可以设置flex-wrap 换行（默认不换            
                  行） 沿着主轴排列*/
				/* 设置主轴元素排列方式  默认是从左到右 */
				justify-content: flex-start;
				/* justify-content: flex-end; */
				/* 字元素 居中对齐*/
				justify-content:center;
				/* 平均分配剩余空间 */
				justify-content: space-around;
				/* 先两边贴边  再分配剩余空间啊 */
				justify-content: space-between;
			}
			div span{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
			}

1.3 flex-wrap

flex排列中   默认不换行    如果父元素装不下 会缩小子的元素 

			div{
				width: 600px;
				height: 300px;
				background-color: purple;
				display: flex;
				/* flex-direction: row; */
				/* justify-content: space-around; */
				/* 	flex-wrap: nowrap; 默认不换行*/
				flex-wrap: wrap;
			}
			/* 行内元素   不可以设置宽高  由内容撑开 */
			div span{
				width: 100px;
				height:100px;
				margin-right: 30px;
				background-color: #008000;
			}

1.4 align-item 侧轴单行排列方式

align-items  侧轴 （默认y轴）  上的子元素排列方式 （单行）
属性值
1.flex-start  默认值  从上到下
2.flex-end    从下到上
3.center      挤在一起(垂直剧中)
4.stretch     拉伸

            div{
				display: flex;
				width: 500px;
				height: 400px;
				background-color: green;
				/* 默认主轴 x 轴 row*/
				/* flex-direction: column; */
				justify-content: center;
				/* 侧轴居中 */
				align-items: center;
				/* 拉伸   但是子盒子不能加高度*/
				/* align-items: stretch; */
			}
			div span{
				width: 100px;
				height: 100px;
				margin-right: 10px;
				background-color: #0000FF;
			}

1.5 align-content 侧轴多行排列方式

align-content  适用于 "子项" 出现 "换行" 的情况下
属性值
1.flex-start  默认在侧轴的头部开始排列
2.flex-end    在侧轴的尾部开始排列
3.center      在侧轴中间显示
4.space-around 子项在侧轴平分剩余空间
5.space-between 子项在侧轴分布在两头，在平分剩余空间
6.stretch  

            div{
				/* 添加弹性盒子 */
				display: flex;
				width: 800px;
				height: 400px;
				background-color: dimgray;
				/* justify-content: space-between; */
				justify-content: center;
				flex-wrap: wrap;
				/* 因为有了换行  所以我们选择algin-content 多行子元素对齐方式 */
				/* align-content: flex-start; */
				align-content: center;
				/* align-content: space-around; */
				/* align-content: space-between; */
				/* align-content: flex-start; */
				/* align-content: flex-end; */
			}
			div span{
				width: 150px;
				height: 100px;
				margin: 10px;
				background-color: #0000FF;
			}

1.6flex-flow

flex-flow  相当于同时设置了flex-direction 和 flex-wrap 简写

默认值为row nowrap

2 flex 子项上属性

1.flex子项目占的份数   
2.align-self控制自己在侧轴的排列方式  
3.order属性定义子项目的排列顺序（前后顺序）

2.1 flex

 felx  属性 定义子项目分配剩余空间  用flex来表示占多少份数

默认值 是 0

			section{
				display: flex;
				width: 60%;
				height: 200px;
				margin: 0 auto;
				background-color: #6aff41;
			}
			section span:nth-child(1){
				background-color: #0000FF;
				width: 100px;
				height: 100px;
			}
			section span:nth-child(2){
				background-color: #382980;
				/* height: 100px; */
				/* 分配剩余空间的份数 */
				flex: 1;
			}
			section span:nth-child(3){
				width: 100px;
				height: 100px;
				background-color: #ffdf5c;
			}

2.2 align-self

 控制子项自己在  侧轴上  的排列方式

                div{
					display: flex;
					width: 500px;
					height: 200px;
					background-color: #0000FF;
					justify-content: space-around;
				}
				div span{
					width: 100px;
					height: 100px;
				}
				div span:nth-child(1){
					background-color: red;
				}
				div span:nth-child(2){
					background-color: green;
					/* 单个元素的排列样式 */
					align-self: flex-end;
				}
				div span:nth-child(3){
					background-color: pink;
				}

2.3 order

属性定义子项目的排列顺序（前后顺序）

			div{
				display: flex;
				width:60%;
				height: 100px;
				border: 1px solid red;
				flex-direction: row ;/* 默认值 */
				flex-wrap: wrap;/* 超出换行 */
				justify-content: space-between;
			}
			div span{
				width: 100px;
				height: 100px;
			}
			div span:nth-child(1){
				background-color: blue;
			}
			div span:nth-child(2){
				background-color: red;
			}
			div span:nth-child(3){
				background-color: orange;
				order: 1;
			}
			div span:nth-child(4){
				background-color: gray;
				/* 默认是  0  所以在前面  数值越小越在前面*/
				order: -1;
			}