【39】FlexboxLayout使用介绍
FlexboxLayout介绍:Flexbox 也称为弹性盒子模型 或伸缩盒子模型,广泛用于前端开发,做过前端 web 的都知道Bootstrap 中有一套强大的 CSS Grid网格样式。Bootstrap 的出现 大大提高了前端开发的效率,并且引领了响应式布局、跨平台开发的潮流。 FlexboxLayout 就是类似于 bootstrap 中的Grid栅格系统但又不相同的强大控件,其实更接近于前端开发中弹性布局 图片展示:使用介绍:Flexbox 是CSS领域的比较强大的一个布局,我们在 Android 开发中使用 Linearlayout + RelativeLayout 基本可以实现大部分复杂的布局,但是Google就想了,有没有类似 Flexbox 的一个布局呢?这使用起来一个布局就可以搞定各种复杂的情况了,于是 FlexboxLayout 就应运而生了。 所以 FlexboxLayout 是针对 Android 平台的,实现类似 Flexbox 布局方案的一个开源项目,开源地址: 使用方式使用方式很简单,只需要添加以下依赖: compile ‘com.google.android:flexbox:0.1.2’ xml中这样使用:属性介绍:flexDirectionflexDirection 属性决定主轴的方向(即项目的排列方向)。类似 LinearLayout 的 vertical 和 horizontal。 有四个值可以选择:row(默认值):主轴为水平方向,起点在左端。 flexWrap默认情况下 Flex 跟 LinearLayout 一样,都是不带换行排列的,但是flexWrap属性可以支持换行排列。这个也比 LinearLayout 吊啊有三个值: nowrap :不换行 justifyContentjustifyContent属性定义了项目在主轴上的对齐方式。 flex-start(默认值):左对齐 alignItemsalignItems属性定义项目在副轴轴上如何对齐。 flex-start:交叉轴的起点对齐。 alignContentalignContent属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 flex-start:与交叉轴的起点对齐。 子元素属性layout_order默认情况下子元素的排列方式按照文档流的顺序依次排序,而order属性可以控制排列的顺序,负值在前,正值灾后,按照从小到大的顺序依次排列。我们说之所以 FlexboxLayout 相对LinearLayout强就是因为一些属性比较给力,order就是其中之一。 layout_flexGrowlayout_flexGrow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。一张图看懂。跟 LinearLayout 中的weight属性一样。 如果所有项目的 layout_flexGrow 属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的 layout_flexGrow 属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。 layout_flexShrinklayout_flexShrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 如果所有项目的 layout_flexShrink 属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。 layout_alignSelflayout_alignSelf 属性允许单个子元素有与其他子元素不一样的对齐方式,可覆盖 alignItems 属性。默认值为auto,表示继承父元素的 alignItems 属性,如果没有父元素,则等同于stretch。 auto (default) 该属性可能取6个值,除了auto,其他都与align-items属性完全一致。 layout_flexBasisPercentlayout_flexBasisPercent 属性定义了在分配多余空间之前,子元素占据的main size主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素的本来大小。 欢迎入群:公众号IT面试题汇总讨论群如果扫描不进去,加我微信(rdst6029930)拉你。欢迎关注《IT面试题汇总》微信订阅号。每天推送经典面试题和面试心得技巧,都是干货!微信订阅号二维码如下:参考博客:http://blog.csdn.net/github_14899071/article/details/51340863 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |