Why is the "justify content: space-between" not working in this code?

Question

Above is a picture of my current design. The question is regarding the first container in the dashboard.

The different content inside the container is stuck to each other.

What I am trying to achieve is this:

The HTML code is (using mudblazor):

<MudContainer Class="firstRowContainer" MaxWidth="MaxWidth.Large">
    <MudGrid>
        <MudPaper Elevation="6" Class="firstRowContent">
            <p>Amount bookings today</p>
        </MudPaper>
        <MudPaper Elevation="3" Class="firstRowContent">
            <p>Amount open quotes</p>
        </MudPaper>
        <MudPaper Elevation="3" Class="firstRowContent">
            <p>top 10 customs amount bookings per range</p>
        </MudPaper>
        <MudPaper Elevation="3" Class="firstRowContent">
            <p>Amount new customers today</p>
        </MudPaper>
        <MudPaper Elevation="3" Class="firstRowContent">
            <p>top 10 ports</p>
        </MudPaper>
        <MudPaper Elevation="3" Class="firstRowContent">
            <p>Amount active bookings</p>
        </MudPaper>
    </MudGrid>
</MudContainer>

CSS is:

<style>
    .firstRowContainer {
        position: relative;
        display: flex;
        flex: none;
        flex-direction: row;
        justify-content: space-between;
        top: 10px;
        margin-left: 5px;
        padding: 11px;
    }

    .firstRowContent {
        border: 0.5px solid aliceblue;
        flex: none;
        top: 5px;
        width: 150px;
        max-width: 150px;
        height: 80px;
    }
</style>

I have read that I should use display: flex and I've tried different things, but nothing seems to work. I am not sure, but I think the parent/child relation between the container and the content is not set up correctly.

How can I add space between these boxes?

score 2 · Accepted Answer · answered Feb 28 '23 at 13:55

Your flex container .firstRowContainer only has one child: The MudGrid element. Therefore this is the only flex item, which won't work the way you imagine it.

To fix this, you need to apply the flexbox settings to the direct parent of the .firstRowContent, items i.e. the <MudGrid> element.

Meaning, your selector should be be

.firstRowContainer > MudGrid {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: row;
    justify-content: space-between;
    top: 10px;
    margin-left: 5px;
    padding: 11px;
}

As an alternative solution, you could apply display: contents; to .firstRowContainer > MudGrid and leave the rest as you have it now. This setting causes the element to more or less be ignored by CSS and will treat its child elements as the flex items that belong to its parent element.

While your analysis of the issue is correct, your CSS selector solution isn't because `` is a Blazor component which means you cannot handle it with CSS as you would with an HTML tag. The author was wrong to call his piece of code an "HTML code". — T.Trassoudaine, Feb 28 '23 at 14:21
@Henk However, as long as the MudBlazor developers don't modify `MudGrid`, you could have the right behaviour by using `.firstRowContainer > .mud-grid` instead or `` — T.Trassoudaine, Feb 28 '23 at 14:40

score 0 · Answer 2 · answered Feb 28 '23 at 13:50

You want space between items, right? You need add margin-left: 5px; to class firstRowContent. Like:

.firstRowContent {
    border: 0.5px solid aliceblue;
    flex: none;
    top: 5px;
    width: 150px;
    max-width: 150px;
    height: 80px;
    margin-left: 5px;
}

score 0 · Answer 3 · answered Feb 28 '23 at 13:52

Could be two things:

The container isn't spaced 100% so it's only as wide as the elements. Use width:100% on the container.

Or: Looks like the MudGrid-Element which contains all the items is "in the way".

The flex-child-elements need to be direct children of their container. You can apply display:contents; to the MudGrid-Element, so it will get out of the way and your elements should space correctly.

Why is the "justify content: space-between" not working in this code?

3 Answers3