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

Flexbox 布局续

时间:2017-12-03 15:33:06      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:out   项目   ems   空间   bsp   它的   nbsp   浏览器   容器   

2)居中对齐的 flex 项

3)铺开的 flex 项

  • space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。(愚人码头注:该属性以前很少看到,原因是以前浏览器不支持,chrome 也是 60 版本之后才支持。延伸一下,align-content: space-evenly 也是这个逻辑,建议在 chrome 60 下查看 这个demo 。 )
  • space-between : 任何两个相邻 flex 项之间的间距是相同的,但不一定等于第一个/最后一个 flex 项与 flex 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。
  • space-around : flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意,这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍。

4)flex 项在交叉轴上的对齐

通常,我们想沿着 flex 方向(主轴)排列 flex 项,还可以在垂直于它的方向(交叉轴)上对齐 flex 项。通过设置 justify-content:centeralign-items:center,可以使 flex 项水平和垂直放置在 flex 容器的中心。

Flexbox 布局续

标签:out   项目   ems   空间   bsp   它的   nbsp   浏览器   容器   

原文地址:http://www.cnblogs.com/yeguijiang/p/7966123.html

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