Dimensionen mit Flex-MinHeight oder Padding?

by

Manchmal möchte man innerhalb eines Container-Blocks die Inhalte mittig & rechts platzieren. Das Flexbox-Modell bietet eine einfache Möglichkeit, das umzusetzen. Doch nicht immer ist das sinnvoll.

Wie in diesem GP-Support-Thread aufgezeigt, ist es häufig sinnvoller, lediglich mit padding zu arbeiten.

“Padding makes the most sense for that design.

To use Flex, Container #1 ( the parent Container ) would need:

1. a Minimum Height set to a value that is larger than the content inside it.
2. a Layout > Display set to Flex, and the Align Items set to center.

This method creates more CSS:

.my-container {
    min-height: 300px;
    display: flex;
    align-items: center;
}

vs

.my-container {
    padding: 40px;
}

And the padding just does the job and maintains the spacing regardless of whats inside the container.
Whereas with flex and min-height you need to calculate that height, and the spacing around will vary if the content changes height.”