W kontenerze Flexbox z ustawionymi regułami display: flex; oraz flex-direction: row;, aby rozłożyć elementy równomiernie wzdłuż głównej osi w taki sposób, aby odstępy między nimi były równe, a odstępy na brzegach kontenera były o połowę mniejsze od odstępów między elementami, należy zastosować właściwość:

Poprawna odpowiedź: B (justify-content: space-around;)

Ponieważ wartość space-around rozkłada elementy w linii równomiernie, przydzielając taką samą przestrzeń wokół każdego elementu. W efekcie wolna przestrzeń między sąsiednimi elementami sumuje się, a na skrajnych brzegach kontenera pozostaje pojedyncza (czyli o połowę mniejsza) porcja wolnego miejsca.

Opcja A jest niepoprawna, ponieważ wartość space-between nie dodaje żadnego odstępu na brzegach kontenera (skrajne elementy dotykają krawędzi). Opcja C jest niepoprawna, ponieważ space-evenly sprawia, że wszystkie odstępy (zarówno między elementami, jak i na brzegach) są dokładnie takie same. Opcja D jest niepoprawna, ponieważ właściwość align-items służy do wyrównywania elementów wzdłuż osi poprzecznej (pionowej w tym układzie), a nie głównej.

Dlaczego pozostałe opcje są nieprawidłowe?

• A: Opcja justify-content: space-between; nie odpowiada prawidłowemu rozwiązaniu problemu opisanego w pytaniu.
• C: Opcja justify-content: space-evenly; nie odpowiada prawidłowemu rozwiązaniu problemu opisanego w pytaniu.
• D: Opcja align-items: center; nie odpowiada prawidłowemu rozwiązaniu problemu opisanego w pytaniu.