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

弹性布局

时间:2017-10-29 11:14:29      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:origin   span   css3   support   ef6   ext   基线   分享   content   

一个弹性布局由一个伸缩容器和许多伸缩项目组成,只需通过改变这些容器属性和项目属性来改变布局。

1. 容器属性:

(1) flex-direction决定主轴的方向,横向排列还是纵向排列。

flex-direction : row | row-reverse | column | column-reverse;
  • row横向排列。

技术分享

  • row-reverse横向反向排列。


技术分享

  • column纵向排列。


技术分享

  • column-reverse纵向反向排列。


技术分享(2) flex-wrap属性 规定多个项目在一列时是否换行。

flex-wrap : nowrap | wrap | wrap-reverse;
  • nowrap不换行


技术分享

  • wrap换行


技术分享

  • wrap-reverse反向换行


技术分享(3) flex-flow属性是flex-direction和flex-wrap属性的简写。

flex-flow : row | row-reverse | column | column-reverse  nowrap | wrap | wrap-reverse;

(4) justify-content属性 决定容器内的项目在水平方向上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;
  • flex-start 水平左对齐


技术分享

  • flex-end 水平右对齐


技术分享

  • center 水平居中对齐


技术分享

  • space-around 水平等间距对齐(包括左右两端)


技术分享

  • space-between 水平等间距对齐(不包括左右两端)

 

技术分享(5) align-items属性 决定容器内的项目在纵向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;
  • flex-start 垂直向上对齐


技术分享

  • flex-end 垂直向下对齐


技术分享

  • center 垂直居中对齐


技术分享

  • baseline 根据容器内的项目的第一行文字基线对齐


技术分享

  • stretch 容器内的项目没有规定高度或者auto的情况下,高度默认铺满容器


技术分享(6) align-content属性 决定容器内的多行项目在纵向上的对齐方式。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  • flex-start 多行垂直向上对齐


技术分享

  • flex-end 多行垂直向下距底部对齐


技术分享

  • center 多行垂直居中对齐


技术分享

  • space-around 多行垂直方向上等距对齐(包括上下两端)


技术分享

  • space-between 多行垂直方向上等距对齐(不包括上下两端)


技术分享

  • stretch 容器内的项目没有设置高度的情况下纵向占满整个容器


技术分享

2. 项目属性:

(1) flex-basis 属性用于设置项目伸缩基准值(不建议单独使用)。

(2) flex-grow 属性用于设置项目扩展比率(不建议单独使用)。

(3) flex-shrink 属性用于设置项目收缩比率(不建议单独使用)。

(4) flex 属性用于设置容器内的项目如何分配空间,是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性(建议使用简写属性)。

技术分享

(5) order属性决定该项目的排放顺序。

技术分享

(6) align-self属性允许单个项目有与其他项目不一样的对齐方式,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。设置以后覆盖父元素的align-items属性。

align-self : auto | flex-start | flex-end | center | baseline | stretch;

技术分享

三、浏览器支持情况与兼容问题

支持情况:Can I use... Support tables for HTML5, CSS3, etc

技术分享

 

弹性布局

标签:origin   span   css3   support   ef6   ext   基线   分享   content   

原文地址:http://www.cnblogs.com/webqinjunjie/p/7749239.html

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