CSS-es autómatikus szélességű csempe elrendezés

Az előző leckében a csempe elrendezésünknél az volt a helyzet, hogy az elemek szélességének és a térközeiknek összege kellett, hogy adja a szülő szélességét. Ez egy kicsit nem univerzális. Csináljuk meg úgy, hogy az elemek automatikusan alkalmazkodjanak a szülő szélességéhez.

Tegyük fel, hogy van egy ilyen szülőnk:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

Tegyük fel, hogy a csempe elemei 4 blokkot soronként tartalmaznak:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Állítsuk be a blokkjaink szélességét úgy, hogy mindegyik közülük a szülő negyedét foglalja el. Ehhez állítsuk a méretüket 25%-ra:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}