css弹性布局

1.弹性布局是什么

在移动端一种方便的布局方式，打破了之前用浮动，定位的布局，更加灵活。

2.弹性布局的格式

包含父元素和子元素，有对应的属性应用在父元素和子元素达到布局的目的

3.父元素的属性

要开启弹性布局，父元素要先加上一个flex属性

display: -webkit-flex; /* Safari */
display: flex;

当然，行内元素也可以用弹性布局，同样父元素要加上flex属性

display: inline-flex;

另外父元素还可以加上下面6个属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

用的比较多的就2个属性,子元素的水平和垂直对齐

//子元素水平排列
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;

}

//子元素垂直排列

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

4.子元素属性

用的最多的就是flex属性(包含了flex-grow, flex-shrink 和 flex-basis)

flex-grow表示放大比例，默认为0，flex-shrink缩写比例，默认为1。flex-basis表示子元素宽度，默认auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

参考资料：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool