flex-骰子布局

弹性容器单行：主轴居中，交叉轴居中。

 display: flex;

 flex-direction: row;

 align-items: center;

 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>

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

巴特西

flex-骰子布局

最新文章

热门文章