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

弹性盒子模型(Flexible Box) 属性(新)

时间:2020-12-04 11:45:31      阅读:16      评论:0      收藏:0      [点我收藏+]

标签:通过   lin   ref   strip   扩展   tab   xib   container   收缩   

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)两部分组成。

弹性容器通过设置 display 属性的值为 flex 或 inline‐flex将其定义为弹性容器。

弹性容器内包含了一个或者多个弹性子元素。

弹性盒子模型(Flexible Box) 属性(新)

属性描述CSS
flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。 3
flex-grow 设置或检索弹性盒的扩展比率。 3
flex-shrink 设置或检索弹性盒的收缩比率。 3
flex-basis 设置或检索弹性盒伸缩基准值。 3
flex-flow 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 3
flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。 3
flex-wrap 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。 3
align-content 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。 3
align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 3
align-self 定义flex子项单独在侧轴(纵轴)方向上的对齐方式。 3
justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 3
order 设置或检索弹性盒模型对象的子元素出现的順序。 3

弹性盒子模型(Flexible Box) 属性(旧)

属性描述
box-align 指定如何对齐一个框的子元素 3
box-direction 指定在哪个方向,显示一个框的子元素 3
box-flex 指定一个框的子元素是否是灵活的或固定的大小 3
box-flex-group 指派JavaScript
灵活的元素到Flex组
3
box-lines 每当它在父框的空间运行时,是否指定将再上一个新的行列 3
box-ordinal-group 指定一个框的子元素的显示顺序 3
box-orient 指定一个框的子元素是否在水平或垂直方向应铺设 3
box-pack 指定横向盒在垂直框的水平位置和垂直位置 3

弹性盒子模型(Flexible Box) 属性(新)

标签:通过   lin   ref   strip   扩展   tab   xib   container   收缩   

原文地址:https://www.cnblogs.com/reimu2018/p/14063613.html

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