How to make flex space around but not leave space like in second row

Question

I want to make flex space around edge to edge but not leave spaces like in second row, It should leave space on right if their is two or three rows instead of leaving space in between. I want it to align left to right

What is happening is exactly what "space around" is designed to do. Perhaps you don't want to "space around" but rather something else. — Liam Pillay, Feb 25 '22 at 08:16

score -1 · Answer 1 · answered Feb 25 '22 at 08:07

you can get desired results by wraping them in different parent tags like

<style>
            main {
                display: flex;
                justify-content: space-between;
            }
            div {
                width: 80px;
                height: 80px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <main>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </main>
        <main>
            <div>6</div>
            <div>7</div>
        </main>
    </body>

How to make flex space around but not leave space like in second row

1 Answers1