css弹性布局的学习

弹性布局

• 弹性容器：设置了属性display=flex 这个元素为弹性容器
• 弹性子元素：设置了属性display=flex 弹性容器的直接子元素

弹性主轴方向（默认主轴方向是从左到右row）

通过设置弹性容器的flex-direction属性修改主轴方向。若直接子元素的组成的全部宽度超过父元素的宽度时，直接子元素宽度就会按比例缩小。

			/*主轴从左到右*/
			flex-direction: row;
			/*主轴从上到下*/
			flex-direction: column;
			/*主轴从右到左*/
			flex-direction: row-reverse;
			/*主轴从下到上*/
			flex-direction: column-reverse;

设置主轴内容分布（默认向主轴的开始位置靠拢flex-start）

通过设置弹性容器的justify-content属性修改主轴的内容分布。

			/*向主轴的开始位置靠拢*/
			justify-content: flex-start;
			/*向主轴的结束位置靠拢*/
			justify-content: flex-end;
			/*space开头的都是平均分布*/
/*内容两边有间隔，内容中间也有间隔，两边间隔是中间间隔宽度的一半*/
			justify-content: space-around;
			/*内容两边没有间隔，中间有间隔*/
			justify-content: space-between;
			/*两边有间隔，中间有间隔，间隔都是相同的 这是新的属性*/
			justify-content: space-evenly;

设置侧轴的内容分布单行（默认是拉伸stretch）

通过设置弹性容器的align-items属性修改子元素侧轴的内容分布单行

			/*子元素在弹性布局的当前行的侧轴方向的对齐方式*/
			/*居中对齐*/
			align-items: center;
			/*对齐起始边界*/
			align-items: flex-start;
			/*对齐结束边界*/
			align-items: flex-end;
			/*拉伸*/
			align-items: stretch;

弹性布局换行（默认是不换行nowrap）

在前面已经说过：若直接子元素的组成的全部宽度超过父元素的宽度时，直接子元素宽度就会按比例缩小。
所以可以通过修改弹性容器的flex-wrap属性修改子元素是否可以换行

			flex-wrap: wrap;
			flex-wrap: nowrap;

设置侧轴的内容分布多行

首先若想修改多行分布 必须将换行属性设为flex-wrap: wrap;
通过设置弹性容器的align-content属性修改子元素侧轴的内容分布多行

			/*多行内容居中对齐*/
			align-content: center;
			/*侧轴开始位置靠拢*/
			align-content: flex-start;
			/*侧轴结束位置靠拢*/
			align-content: flex-end;
			/*平均分布，内容两边有间隔，内容中间也有间隔，两边间隔是中间间隔宽度的一半*/
			align-content: space-between;
			/*内容两边没有间隔，中间有间隔*/
			align-content: space-around;
			/*两边有间隔，中间有间隔，间隔都是相同的 这是新的属性*/
			align-content: space-evenly;

弹性子元素的空间分布

当我想实现左边是侧边栏，中间是主要内容，右边是广告内容。而侧边栏宽度是主要内容宽度的一半，广告内容的宽度是200px的效果时。可以设置弹性子元素的flex属性

	<style type="text/css">
		.parent{
			width: 800px;
			height: 800px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.c1{
			flex: 1;
			background: #889291;
		}
		.c2{
			flex:2;
			background: green;
		}
		.c3{
			width: 200px;
			background: red;
		}
	</style>
	<div class="parent">
		<div class="c1">1</div>
		<div class="c2">2</div>
		<div class="c3">3</div>
	</div>

弹性子元素的排序

通过设置弹性资源的order值，修改子元素的排序，从小到大。

		<style type="text/css">
		.parent{
			width: 800px;
			height: 800px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.c1{
			flex: 1;
			background: #889291;
			order: 3;
		}
		.c2{
			flex:2;
			background: green;
			order: 2;
		}
		.c3{
			width: 200px;
			background: red;
			order: 1;
		}
		</style>
		<div class="parent">
		<div class="c1">1</div>
		<div class="c2">2</div>
		<div class="c3">3</div>
	</div>

单个弹性子元素的侧轴设置

通过设置子元素的align-self修改单个子元素的侧轴分布

.c1{
			flex: 1;
			background: #889291;
			align-self: stretch;
		}
		.c2{
			flex:2;
			background: green;
		}
		.c3{
			width: 200px;
			background: red;
		}

继承

在网页右键点击检查查看网页源代码时，有些元素会有默认的继承。

但是继承默认仅继承文字相关属性，不继承盒子相关属性。