FlexboxLayout流布局的使用(分割线的妙用)

Posted 2023-04-28

参考技术A 在drawable文件下创建shape_flexbox_divider.xml文件，具体内容如下：

效果图

获取标签控件

添加到flexboxLayout

用css3的 clomus 布局 怎么写瀑布流

body里面只有一个div 其他的部分直接追加 怎么写啊 用css3的 columns布局怎么写呢 ？ 哪位大神告知一下啊

参考技术A

首先，css3的布局主要用到下面三个属性

column-count

column-gap

column-rule

其次，在兼容column的浏览器中可以实现瀑布流，代码如下

.demo
    width: 500px;
    height: auto;

    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;

    -webkit-column-gap:10px;
    -moz-column-gap:10px;
    column-gap:10px;

    column-rule:3px outset #ff0000;

    border: 1px solid #ddd;

.demo div
    background: #336699;
    margin-bottom: 4px;
    color: #eee;
    padding: 10px;

<div class="demo">
        <div>1这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>2这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>3这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>4这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>5这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>6这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>7这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>8这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>9这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>11这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>12这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>13这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>14这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>15这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>16这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>17这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>18这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>19这是测试用的文字，测试能不能实现瀑布流。</div>
    </div>
</div>

追问

可以实现瀑布流效果么？把JS部分也给补上呗😁😁😁