码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒子布局:语法

时间:2017-04-16 20:30:09      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:lin   isp   round   item   row   base   起点   items   start   

块级元素转换成弹性盒子:{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(每根轴线的两端对齐)

弹性盒子布局:语法

标签:lin   isp   round   item   row   base   起点   items   start   

原文地址:http://www.cnblogs.com/t258/p/6719593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!