码迷,mamicode.com
首页 > Web开发 > 详细

CSS3中flex伸缩盒子的使用

时间:2017-08-17 21:29:21      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:reverse   没有   rect   检索   etc   参考   比例   cti   nowrap   

flex伸缩盒子:

在父盒子中设置display: flex;子盒子中分别设置flex: 1,按比例设置flex属性值。

其他属性如下:

1、flex-grow:<number>  // 用数值来定义扩展比率。不允许负值

2、flex-shrink:<number>  // 用数值来定义收缩比率。不允许负值

3、flex-basis:<length> | <percentage>  // 设置或检索弹性盒伸缩基准值。

4、flex-flow:<‘ flex-direction ‘> || <‘ flex-wrap ‘>  // 复合属性。设置或检索弹性盒模型对象的子元素排列方式。

5、flex-direction:row | row-reverse | column | column-reverse  // 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列。取值row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。row-reverse:对齐方式与row相反。column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。column-reverse:对齐方式与column相反。

6、flex-wrap:nowrap | wrap | wrap-reverse  // 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。nowrap:flex容器为单行。该情况下flex子项可能会溢出容器wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行wrap-reverse:反转 wrap 排列。

7、align-content:flex-start | flex-end | center | space-between | space-around | stretch // 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <‘ justify-content ‘> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。

...........

参考来源: http://www.css88.com/book/css/properties/flex/align-items.html

 

CSS3中flex伸缩盒子的使用

标签:reverse   没有   rect   检索   etc   参考   比例   cti   nowrap   

原文地址:http://www.cnblogs.com/dontes/p/7384180.html

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