CSS之flex布局

flex（flexible box缩写），该布局又称弹性布局，伸缩布局
传统布局与flex布局对比

传统布局	flex布局
兼容性好	一些浏览器不支持或仅部分支持
布局较繁琐	操作方便，布局简单
在移动端不能很好地布局	移动端应用很广泛

当我们为父盒子设置flex布局以后，子元素的float、clear、vertical-align属性将失效，

父项常见属性

属性名	作用
flex-direction	设置主轴方向
justify-content	设置主轴上元素的排列方式
flex-wrap	设置子元素是否换行
aligin-content	设置侧轴上的子元素排列方式（多行）
aligin-items	设置侧轴上的子元素排列方式（单行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction设置主轴的方向

默认主轴方向是x轴方向，水平向右
默认侧轴方向是y轴方向，水平向下

设置主轴方向

属性	说明
row	从左到右（默认值）
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

flex-direction设置谁为主轴，那么另一个就是侧轴，子元素是跟着主轴排列的

justify-content设置主轴上的子元素排列方式

使用这个属性前要确定好主轴

属性	描述
flex-start	从头部开始，若主轴是x，则从左到右（默认值）
flex-end	从尾部开始排列
center	在主轴居中对齐（若主轴x则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（常用）

flex-wrap设置子元素是否换行

默认情况下，子元素排列在一条线，flex布局中默认时不换行的

属性	说明
nowrap	不换行（默认）
wrap	换行

align-items设置侧轴上的子元素的排列方式（单行）

该属性是控制在侧轴（默认y轴）上的排列方式，子项为单行的时候使用

属性	说明
flex-start	从上到下（默认）
flex-end	从下到上
center	挤在一起居中
stretch	拉伸

align-content设置侧轴上子元素的排列方式（多行）

设置侧轴（默认y轴）上的排列方式，只能用于子项出现换行的时候使用，单行是没有效果的

属性	说明
flex-start	从上到下（默认）
flex-end	从下到上
center	挤在一起居中
stretch	拉伸
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间

注意 align-items（单行）和align-content（多行）的区别

flex-flow

是flex-direction和flex-wrap属性的复合属性

flex-flow: row wrap;

子项常见属性

flex属性

定义子项分配剩余空间，用flex表示占多少份数
例：

.container{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.one,.two,.three,.four{
		width: 100px;
		height: 100px;
	}
	.one{
		background-color: red;
	}
	.two{
		flex: 1;
        background-color: yellow;
	}
	.three{
		flex: 2;
        background-color: blue;
	}
	.four{
		background-color: green;
}

<div class="container">
	<div class="one">1</div>
	<div class="two">2</div>
	<div class="three">3</div>
	<div class="four">4</div>
</div>

align-self

控制子项自己在侧轴上的排列方式，允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值auto，表示继承父元素的align-items属性，若无父元素，则等同于stretch，可设置的属性跟align-items一样

order

定义项目的排列顺序，数值越小越靠前，默认为0
比如我设置上面的three盒子order: -1; 那么它将排到最前面