Pytanie css box-model

Question

Moze ktos mi pomoc to rozwiazac? Myslalem nad tym ale nie wiem jak sie w ogole za to zabrac. 

Chodzi o ostatni podpunkt. Jak moge ustawic 5 elementow o szerokosci 25% obok siebie? Domyslam sie ze trzeba zrobic to tez przy pomocy flexa. Bede wdzieczny za jakas podpowiedz. 

W pliku `index.html` znajdziesz sekcję o nazwie `blocks`.
Stwórz w niej 5 elementów `div` o klasie `block` i każdemu ustaw następujące własności:
* szerokość na `25%`
* wysokość na `100vh`
* obramowanie na `1px solid red`
* ustaw je również obok siebie (jeśli będziesz mieć problem, przypomnij sobie o box-model)

Jeszcze jest druga czesc zadania. Prawie cala zrobiona, brakuje mi tylko jednego podkreslonego podpunktu. Ktos cos podpowie?

Następnie:
* na ekrantach mniejszych niż `450px`, ustaw elementy pod sobą i ukryj ostatni,
* na ekranach większych niż `450px`, ale mniejszych niż `720px`, ustaw elementy obok siebie, pokaż ostatni i ukryj pierwszy,
* na ekranach większych niż `720px`, ale mniejszych niż `1024px`, pokaż tylko ostatni i pierwszy element.
Skorzystaj z podejścia **Mobile first**.
 

Nie wiem jak ustawic zeby byly pod soba kolejno a nie w rzadku ;(

.block{
  width: 25%;
  height: 100vh;
  border: 1px solid red;
  box-sizing: border-box;
  float: left;
@media (max-width: 450px){
  &:last-child{
  display: none;
    }
  }
  @media (min-width:451px) and (max-width:720px){
    display: inline-block;
    &:first-child{
      display: none;
    }
  }
@media (min-width:721px) and (max-width:1024px){
  display: none;
    &:first-child{
      display: inline-block;
}
    &:last-child{
      display: inline-block;
    }
  }
}

 

Comments

Moze ktos jeszcze tutaj zajrzec?:)

Answer 1

Ustawiasz box-model: border-box i nadajesz elementom float:left. Wydaje mi się, że w pytaniu miało chodzić o 4 elementy obok siebie - jeśli ustawimy wtedy content-box i damy im obramowanie, jeden się nie zmieści, przy border-box, zmieszczą się wszystkie. Z użyciem flex można zmieścić elementy jeden obok drugiego, ale nie będą miały wtedy 25%.

Comments

Dzieki, tak myslalem ze nie da sie tego inaczej rozwiazac ale chcialem sie upewnic.

---

ok, w sumie to przy 5 elementach też one będą ułożone obok siebie, z tym, że jeden "spadnie" na dół.