Выравнивание дочерних элементов в родительских гибких контейнерах

Мне нужна помощь по горизонтальному выравниванию дочерних элементов в родительских гибких коробках.

В приведенном ниже макете показан контейнер flex (".parent"), показывающий 4 родительских контейнера (".child"):

Пожалуйста, взгляните на эту графику flexbox
(Я не могу показать свой фактический проект, поэтому я высмеял его в Illustrator.)

  • Зеленая рамка (верхняя) представляет собой заголовок с переменным текстом (не более 3 строк).
  • Синий квадрат (второй снизу) представляет изображение с фиксированной высотой и шириной
    (Я хочу, чтобы эти изображения были выровнены сверху).
  • Желтая рамка представляет собой абзац различной копии.
  • Фиолетовая коробка на дне - это еще одна гибкая коробка с фиксированной высотой.

У меня есть следующий код (в младшем):

.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;
        }
    }
}

EDIT - и вот код 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>
0
13 дек. '16 в 16:32
источник поделиться

Посмотрите другие вопросы по меткам или Задайте вопрос