'Items in specific order using flexbox [duplicate]

I am trying to use flexbox to order items at the beginning of the row. The item in the second row should not be displayed in the center. It should be like in the first row and start the beginning at the row. It should be not important if there are one or two items. enter image description here

<div class="row d-flex justify-content-start">
                    @foreach ($objekte as $objekt)
                    <div class="col d-flex justify-content-center">
                            <a href="{{ route('objekt.show', $objekt->id) }}">
                                <div class="card card-clickable" style="width: 18rem;">
                                    <img class="card-img-top" src="" alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ $objekt->name }}</h5>
                                        <p class="card-text">{{ $objekt->strasse }} {{ $objekt->hausnummer }} <br> {{ $objekt->plz }} {{ $objekt->ort }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
htmlcsstwitter-bootstrap


Solution 1:[1]

The justify-content property for flexbox containers controls this. I would use start instead of center to achieve the desired effect.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 davidvarela_us

Related Questions