Question

我需要帮助在父Flex框中水平对齐子元素。

下面的布局显示了一个Flex容器（＆＃34; .parent＆＃34;），显示了4个父容器（＆＃34; .child＆＃34;）：

Please take a look at this flexbox graphic
（我无法显示我的实际项目，所以我在Illustrator中嘲笑它。）

绿色框（顶部）代表可变文本标题（最多3行）。
蓝色框（第二个向下）表示具有固定高度和宽度的图像
（我希望这些图像在顶部对齐）。
黄色框表示不同副本的段落。
底部的紫色盒子是另一个固定高度的柔性盒子。

我有以下代码（在LESS中）：

.parent {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-flow: wrap;
    flex-wrap: wrap;

    .child {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex: 1;
        -ms-flex:1;
        flex:1;
        -webkit-flex-flow: column;
        -ms-flex-flow: column;
        flex-flow: column;
        -webkit-align-content: space-around;
        align-content: space-around;

        .green {
            -webkit-align-items: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            }

        .blue {
            -webkit-align-items: flex-start;
            -ms-flex-align: start;
            align-items: flex-start;
        }

        .purple {
            -webkit-flex: 1;
            -ms-flex:1;
            flex:1;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: row;
            -ms-flex-flow: row;
            flex-flow: row;
            -webkit-align-items: flex-end;
            -ms-flex-align: end;
            align-items: flex-end;
            -webkit-order: 3;
            -ms-flex-order: 3;
            order: 3;
        }

        .yellow {
            -webkit-order: 2;
            -ms-flex-order: 2;
            order: 2;
        }
    }
}

编辑 - 这是HTML代码：

<section class="parent">

        <article class="child">
            <a href="#">
                <h3 class="green">Title of article</h3>
                <div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
            </a>
            <section class="purple">
                <div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
                <h4 class="authorTitle">by John Doe</h4>
            </section>
            <p class="yellow">Paragraph introducing article summary.</p>
        </article>

        <article class="child">
            <a href="#">
                <h3 class="green">Title of article</h3>
                <div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
            </a>
            <section class="purple">
                <div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
                <h4 class="authorTitle">by John Doe</h4>
            </section>
            <p class="yellow">Paragraph introducing article summary.</p>
        </article>

        <article class="child">
            <a href="#">
                <h3 class="green">Title of article</h3>
                <div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
            </a>
            <section class="purple">
                <div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
                <h4 class="authorTitle">by John Doe</h4>
            </section>
            <p class="yellow">Paragraph introducing article summary.</p>
        </article>

        <article class="child">
            <a href="#">
                <h3 class="green">Title of article</h3>
                <div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
            </a>
            <section class="purple">
                <div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
                <h4 class="authorTitle">by John Doe</h4>
            </section>
            <p class="yellow">Paragraph introducing article summary.</p>
        </article>

</section>

在父Flex容器中对齐子元素

0 个答案: