flex布局学习笔记

在非常熟悉的盒子模型下也有不少的缺点，比如不易实现垂直居中，元素的位置常常要依靠浮动定位等才能解决，在响应式方面盒子模型布局也并不是多么得心应手，而flex布局能在一定程度上解决上述问题，下面归纳一下flex布局的一些基本知识要点及注意事项

1.任一容器都能指定flex布局

<div class="content"></div>
<span class="cont"></span>

.content{
	display: flex;
}
.cont{
	display: inline-flex;
}

且在指定flex布局后，其中的子元素的float、clear、vertical-align等都不再生效，子元素的原本块级属性也都会不再生效，注意是子元素，不包含孙子元素以及更下面的元素

<div class="content">
	<div class="fir">这里是第一部分</div>
	<span class="sec">这里是第二部分</span>
	<span class="sec">这里是第三部分</span>
	<div class="thi">
		<div>4-1</div>
		<span>4-2</span>
	</div>
</div>

.content{
	display: flex;
	background: pink;
	height: 400px;
}
.fir{
	background: #C7C7C7;
}
.sec{
	background: #CDB79E;
}
.thi{
	background: #FFE4E1;
}

如上图所示，块级元素属性消失，但仅限子元素，对孙子元素并不生效

2.基本概念

1.容器：使用flex布局的称为flex容器

2.项目：容器下的子元素称为项目

3.主轴：默认水平轴为主轴（但可改变方向），主轴开始与结束的位置分别叫main start、main end

4.交叉轴：默认纵向轴为交叉轴，交叉轴开始与结束的位置分别叫cross start、cross end

3.容器的属性

属性名	属性值	效果
flex-direction	row row-reverse column column-reverse	主轴水平，起点左侧 主轴水平，起点右侧 主轴垂直，起点上边 主轴垂直，起点下边
flex-wrap	nowrap wrap wrap-reverse	超出不换行 超出换行，第一行在上 超出换行，第一行在下
flex-flow	<flex-direction> || <flex-wrap>	flex-direction与flex-wrap的合并写法
justify-content	flex-start(默认) flex-end ecnter space-between space-around	左对齐 右对齐 居中 两端对其，项目间隔相等 每个项目两侧间隔相等
align-items	flex-start flex-end ecnter baseline stretch(默认)	交叉轴起点对齐 交叉轴终点对齐 交叉轴居中 项目第一行文字基线对齐 项目未设置宽高，将占满容器高度
alin-content

4.项目属性

属性名称	属性值	效果
order	<integer>整型	根据数值大小对项目排序，越小越靠前，且与代码先后顺序无关
flex-grow	<number>默认0	是否占满剩余空间，以及所占比例，如2是1占比的两倍
flex-shrink	<number>默认1	项目缩小比例
flex-basis	<length> | auto	定义项目占据主轴的空间大小(类似宽度width),默认值auto
flex	flex-grow flex-shrink flex-basis缩写	默认值0 1 auto
align-self	auto flex-satrt flex-end center baseline stretch	对单个项目定义对其方式，默认继承父元素的align-items

注：以上所有内容均来自http://www.runoob.com/w3cnote/flex-grammar.html的整理