我想在纸的对白中对齐我的按钮。

Question

我有一个固定大小的paper-dialog，我想对齐包含一个按钮的<div>。paper-dialog包含一个控制下面的iron-pages的header，paper-tabs。iron-pages包含按钮。

<style is="custom-style">
    paper-dialog {
                width: 1000px;
                height: 585px;
    }
</style>

<paper-dialog>
    <header>Header</header>
    <paper-tabs selected="{{selected}}>
        <paper-tab> tab1</paper-tab>
        <paper-tab> tab2</paper-tab>
    </paper-tabs>
    <iron-pages selected="{{selected}}">
        <div id="tab1" container class="container layout vertical">
            <div> Text section tab1</div>
            <div class="flex></div>
            <div>
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
        <div id="tab2" container class="container layout vertical">
            <div> Text section tab2</div>
            <div class="flex></div>
            <div>
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
    </iron-pages>
</paper-dialog>

但是我永远不能让按钮在paper-dialog的末尾对齐。仅通过对iron-pages中的容器类使用固定大小。tab1和tab2中文本部分的长度差别很大。这就是为什么我想修改按钮是如何对齐和定位在按钮上的原因。在不使用固定尺寸的情况下，我如何做到这一点？

Answer 1

我解决了我的问题。问题是每个按钮的父类都必须使用所有剩余的空间。因此，将flex添加到每个父类。其次，添加end，将按钮放置在底部。

<style is="custom-style">
    paper-dialog {
                width: 1000px;
                height: 585px;
    }
</style>

<paper-dialog class="flex layout vertical">
    <header>Header</header>
    <paper-tabs selected="{{selected}}>
        <paper-tab> tab1</paper-tab>
        <paper-tab> tab2</paper-tab>
    </paper-tabs>
    <iron-pages class="flex layout vertical" selected="{{selected}}">
        <div id="tab1" container class="container flex layout vertical">
            <div> Text section tab1</div>
            <div class="flex></div>
            <div class="layout horizontal end">
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
        <div id="tab2" container class="container layout vertical">
            <div> Text section tab2</div>
            <div class="flex></div>
            <div>
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
    </iron-pages>
</paper-dialog>

另见：Fill page with iron-pages element