弹性盒子布局:语法

块级元素转换成弹性盒子:{display:flex}

行内元素转换成弹性盒子:{display:inline-flex}

1.flex-direction:用来确认主轴的方向

  row(从左向右)相对于row-reverse(从右向左)
  column(从上向下)相对于column-reverse(从下向上)

2.flex-wrap:作用于子元素换不换行

  nowrap(不换行) wrap(换行,从上往下走)wrap-recerse(换行,从上往下走)

3.justify-content:定义子元素在主轴上对齐的方式

  flex-start(左对齐)flex-end(右对齐)center(居中)space-between(两端对齐)space-around(均分对齐)

4.align-items:交叉轴(Y轴)对齐方式

  flex-start(交叉轴的起点对齐)flex-end(交叉轴的终点对齐)center(居中)baseline(文字基线对齐)

5.align-content:定义多根轴线的对齐方式

  flex-start(起点对齐)flex-end(终点对齐)center(中点对齐)space-between(两端对齐)space-around(每根轴线的两端对齐)

posted @ 2017-04-16 19:11  酷炫的程序猿  阅读(171)  评论(0编辑  收藏  举报