Css-flex布局

大家制作页面的时候一定遇到过很麻烦的情况，元素不知道为什么跳来跳去，始终不到自己的位置。而今天，就来说一下常用的布局（flex)二维布局，来达到自己想要的效果。

简单介绍css元素

种类	效果	例子
内联元素(inline)	同行从左到右布局	a em span img label
块级元素(block)	从新的一行开始	div h p form
内联块级元素(Inline-block)	放置类似内联元素，但可以调整边框	button input

flex布局

作用

总的来说，可以理解为将内部元素转化为(inlline）元素

常用属性

属性	效果	例子
Flex-direction	改变主轴方向	row: 横排 column：竖排
Flex-wrap	主轴内容满了，换行
Justify-content	主轴元素对齐方式	见下表
Align-items	交叉轴对齐方式	大致类似Justify-content，只是没有space-……方式，stretch（默认值）伸展至占满整个容器的高度
Align-content	交叉轴行对齐方式 多行	类似于Justify-content,同时stretch（默认值）多行伸展至占满整个容器的高度

Justify-content	属性
flex-start	一般是左方向手机
flex-end	一般是右方向
center	一般就是居中对齐
space-between	两端对齐，靠着容器壁，剩余空间平分
space-around	分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly	平均对齐，不靠着容器壁，剩余空间平分