Kevin Powell - Community•14mo ago

Looking for the effective way to use flexbox

Would like to know the best practice when using flexbox. I am attaching my code snippet and screenshot. If anyone have a better way, plz help me.

    <div class="d-flex justify-content-between mt-6 mb-4 mb-sm-8">
        <div>
            <h1 class="text-start fw-bold">Internal Handover</h1>
            <span class="breadcrumb-item">Dashboard / Internal Handover</span>
        </div>
        <div class="d-flex align-items-center">
            <a href="/handover/new" class="btn btn-primary float-end">Initiate Handover</a>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-6 mb-4 mb-sm-8">
        <div>
            <h1 class="text-start fw-bold">Internal Handover</h1>
            <span class="breadcrumb-item">Dashboard / Internal Handover</span>
        </div>
        <div class="d-flex align-items-center">
            <a href="/handover/new" class="btn btn-primary float-end">Initiate Handover</a>
        </div>
    </div>

4 Replies

clevermissfox•14mo ago

Hi. I’m not clear on your question. What is it about flexbox you need help with? I’m not seeing what you are illustrating with the screenshot. It’s also helpful if you throw your code into a codepen so we can get more context and see what possible problems you are having

Rainbow-catchOP•14mo ago

Thanks for your answer. What I wanted to know is just about the best practice. I used 2 div inside a flex box. And i want to know if there is any other solution to not use so many divs

clevermissfox•14mo ago

You can use grid which would reduce the html. Or if you want to use flexbox, divs, sections, or I personally use UL items to group on personal projects. Or you could use spans with the items inside it you don't want to be flex children Looking at your code you don't need to wrap the link in a div since it's the only other element

Rainbow-catchOP•14mo ago

I see, thanks

Gaming

Programming

Looking for the effective way to use flexbox