zoukankan      html  css  js  c++  java
  • flex-骰子布局

    弹性容器单行:主轴居中,交叉轴居中。

    1 display: flex;
    2 flex-direction: row;
    3 align-items: center;
    4 justify-content: center;

    弹性容器单行;主轴两端对齐;交叉轴一个为起点边缘;一个为终点边缘;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    <div class="row">
        <div class="d" style="align-self: flex-start"></div>
        <div class="d" style="align-self: flex-end"></div>
    </div>
    

    单选;主轴两端对齐;交叉轴一个为起点边缘;一个为居中对齐;一个为终点边缘;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    <div class="row">
        <div class="d" style="align-self: flex-start"></div>
        <div class="d" style="align-self: center"></div>
        <div class="d" style="align-self: flex-end"></div>
    </div>

    1:弹性窗口设置为多行,交叉轴为两端对齐

    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;

    2:每行基础大小设置为100%,然后每个子行主轴为两端对齐

    display: flex;
    justify-content: space-between;
    flex-basis: 100%;
    <div class="row">
        <div class="tr">
            <div class="d"></div>
            <div class="d"></div>
        </div>
        <div class="tr">
            <div class="d"></div>
            <div class="d"></div>
        </div>
    </div>

    在4的基础上增加一行,设置为主轴居中

    display: flex;
    flex-basis: 100%;
    justify-content: center;
    <div class="row">
        <div class="tr">
            <div class="d"></div>
            <div class="d"></div>
        </div>
        <div class="tr-c">
            <div class="d"></div>
        </div>
        <div class="tr">
            <div class="d"></div>
            <div class="d"></div>
        </div>
    </div>

    在4的基本上增加一行

    <div class="row">
        <div class="tr">
            <div class="d"></div>
            <div class="d"></div>
        </div>
        <div class="tr">
            <div class="d"></div>
            <div class="d"></div>
        </div>
        <div class="tr">
            <div class="d"></div>
            <div class="d"></div>
        </div>
    </div>

    没有设置对齐方式之前弹性项目大小是拉伸的,设置之后大小由内部撑大。

  • 相关阅读:
    Java 发送http post 请求
    经纬度计算
    js cookie操作
    wdatepicker默认时间为当前时间
    基于ssm的poi反射bean实例
    jbox小型交互表单(ajax)
    点击图片查看大图(纯js)
    查询物理表字段(mysql)
    离线安装 Cloudera ( CDH 5.x )(转载)
    sed命令详解 (转载)
  • 原文地址:https://www.cnblogs.com/whnba/p/10465084.html
Copyright © 2011-2022 走看看