How do I align my boxes staggered underneath other boxes?-CodePudding

Im fairly new to HTML and CSS.

I've got these 5 boxes, but I want to move the 2 boxes, underneath the top boxes so that there aligned in the space between. See picture

Here my CSS is.

.box a{
    margin-left: 150px;
    margin-top: 10px;
    text-align: center;
    display: inline-block;
    background: yellow;
    padding: 15px 30px;
    border: 1px solid green;
    width: 150px;
    height: 40px;
    text-decoration: none;
    color: lightskyblue;
}

And here my HTML is.
<div class="box">
            <a th:href="@{info}">Info page</a>
            <a th:href="@{responsibility}">Responsibility page</a>
            <a th:href="@{what_we_do}">What we do</a>
            <a th:href="@{profile}">Profile</a>
            <a th:href="@{#}">Picture to come</a>
        </div>

Hope someone can help me figure out the issue. Thank you.

CodePudding user response：

You should separate the rows in different divs like this:

<div class="box">
       <div class="row1">
            <a th:href="@{info}">Info page</a>
            <a th:href="@{responsibility}">Responsibility page</a>
            <a th:href="@{what_we_do}">What we do</a>
       </div>
       <div class="row2">
            <a th:href="@{profile}">Profile</a>
            <a th:href="@{#}">Picture to come</a>
       </div>
   </div>

And make the second row flexible and give it justify-content: space-between like this:

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

Like this the flexible div child elements will take that div space in a flexible way and it will adapt considering the size of the parent div

Ill add you more info about "flex" display to make you understand it more deeply:

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox