起因

因需求遇到一布局从左向右渲染内容，换行之后是内容右对齐。
没有第一时间想到flex布局，内容多数被遗忘，遂重温一遍。

flex布局

flex弹性布局，任何一个容器都可以使用。如果是webkit内核的浏览器，需要加上-webkit前缀

.div{
  display: flex;
  display: -webkit-flex;
  //行内元素用inline-flex
  display:inline-flex;
}

flex容器

图片来源阮一峰博客

main axis: 横向主轴
main start: 横向开始位置
main end: 横向结束位置
cross axis: 竖向主轴
cross start: 竖向开始位置
cross end: 竖向结束位置

容器属性

flex-direction : 决定主轴方向
flex-wrap : 决定是否换行
flex-flow ：上面两个属性简写方式
justify-content : 内容对齐方向
align-items ：竖向轴对齐方式
align-content：定义多根轴线对齐方式

flex-direction

决定主轴方向，如图

image.png

.div{
  flex-direction:  row | row-reverse | column | column-reverse;
  // row: 默认值，水平方向，起点在左边
  // row-reverse : 主轴为水平方向，起点在右边
  // column: 主轴为垂直方向，起点在上边
  // column-reverse: 主轴为垂直方向，起点在下方
}

flex-warp

决定是否换行，换行可以控制第一行在上边还是下边

image.png

.div{
flex-warp:  nowrap | wrap | wrap-reverse;
// nowrap : 默认不换行
// wrap: 换行，第一行在上边
// wrap-reverse: 换行，第一行在下边
}

flex-flow

上面两种属性的简写组合

.div{
flex-flow: <flex-direction> || <flex-wrap>
// <flex-direction>的任何属性
// <flex-wrap>的任何属性
}

justify-content

image.png

.div{
justify-content: flex-start | flex-end | center | space-between | space-around;
// flex-start: 默认 左对齐
// flex-end: 右对齐
// center: 居中
// space-between: 两端对齐，项目之间间隔相等
// space-around: 每个项目两侧间隔相等，项目间的间隔比项目边框大一倍
}

align-items

控制竖向的对齐方式

image.png

.div{
align-items:flex-start | flex-end | center | baseline | stretch;
// stretch: 默认值，如果项目没有设置高度或者auto，将充满整个容器
// flex-start: 顶部对齐
// flex-end:底部对齐
//center:容器中间对齐
// baseline:项目第一行文字基线对齐
}

以上内容参考阮一峰博客，更多详细flex布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool