Using flex-box to align elements to left and right

Question

I am trying to align h2 to the left and edit to the right using flex-box. I followed the approach here and used justify-content property but still no success. Any help would be appreciated.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
        .ReviewBlock__Main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: normal;
            max-width: 70rem;
            margin: 5rem auto;
        }

        @media screen and (min-width: 640px) {
            .ReviewBlock__Main {
                flex-direction: row;
            }
        }

        .ReviewBlock__Main__Section {
            border-style: solid;
            border-width: 1px;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
            padding: 10px;
            width: 95%;
            display: flex;
        }

        @media screen and (min-width: 640px) {
            .ReviewBlock__Main__Section {
                width: 33%;
                margin: 10px;
                padding: 10px;
            }
        }

        .ReviewBlock__Main__Section__TitleBlock {
            display: flex;
            justify-content: space-between;
        }

        .ReviewBlock__Main__Section__TitleBlock__Title {
            font-weight: bold;
            margin: 5px auto 15px 15px;
        }

        .ReviewBlock__Main__Section__TitleBlock__Edit {
            margin: auto;
        }
    </style>

</head>

<body>
    <div class="ReviewBlock">
        <div class="ReviewBlock__Main">
            <section class="ReviewBlock__Main__Section">
                <div>
                    <span class="ReviewBlock__Main__Section__TitleBlock">
                            <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
                            <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
                        </span>
                </div>
            </section>
            <section class="ReviewBlock__Main__Section">
                <div>
                    <span class="ReviewBlock__Main__Section__TitleBlock">
                            <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
                            <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
                        </span>
                </div>
            </section>
            <section class="ReviewBlock__Main__Section">
                <div>
                    <span class="ReviewBlock__Main__Section__TitleBlock">
                        <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
                    </span>
                </div>
            </section>
        </div>

</body>

</html>

score 2 · Accepted Answer · answered May 08 '17 at 06:46

You have to give your div in the section width: 100%.

.ReviewBlock__Main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: normal;
            max-width: 70rem;
            margin: 5rem auto;
        }

        @media screen and (min-width: 640px) {
            .ReviewBlock__Main {
                flex-direction: row;
            }
        }

        .ReviewBlock__Main__Section {
            border-style: solid;
            border-width: 1px;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
            padding: 10px;
            width: 95%;
            display: flex;
        }

        @media screen and (min-width: 640px) {
            .ReviewBlock__Main__Section {
                width: 50%;
                margin: 10px;
                padding: 10px;
            }
        }

        .ReviewBlock__Main__Section__TitleBlock {
            display: flex;
            justify-content: space-between;
        }
        
        .ReviewBlock__Main__Section > div {
          width: 100%;
        }

        .ReviewBlock__Main__Section__TitleBlock__Title {
            font-weight: bold;
            margin: 5px auto 15px 15px;
        }

        .ReviewBlock__Main__Section__TitleBlock__Edit {
            margin: auto;
        }

<div class="ReviewBlock">
        <div class="ReviewBlock__Main">
            <section class="ReviewBlock__Main__Section">
                <div>
                    <span class="ReviewBlock__Main__Section__TitleBlock">
                            <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
                            <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
                        </span>
                </div>
            </section>
            <section class="ReviewBlock__Main__Section">
                <div>
                    <span class="ReviewBlock__Main__Section__TitleBlock">
                            <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
                            <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
                        </span>
                </div>
            </section>
            <section class="ReviewBlock__Main__Section">
                <div>
                    <span class="ReviewBlock__Main__Section__TitleBlock">
                        <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
                    </span>
                </div>
            </section>
        </div>

Using flex-box to align elements to left and right

1 Answers1