Flexbox - umieszczenie elementów obok siebie

Question

Witam, ostatnio chciałem użyć flexboxa by odwzorować umieszczenie elementów zrobionych za pomocą float, myślałem że nie będzie trudno, niestety nie jestem usatysfakcjonowany z efektu końcowego - elementy nie są równe poziomo, oczywiście można bawić się marginesami, ale mam jakieś przeczucie, że za bardzo przekombinowałem używając wielu kontenerów by efekt był podobny do pierwszego projektu, który umieszczam poniżej:

https://codepen.io/jonasschmedtmann/pen/eYgbXrV/1a12771af64312342aa5a5f45bd2347c

a tutaj moja wersja z flexboxem:

https://jsfiddle.net/joLkeq18/

Proszę o jakiś feedback co poprawić.

Comments

Jako ciekawostkę, przykładowa wersja z grid (szablon):  on-line.

Answer 1

Według Mnie na przykładzie podanym przez Ciebie widać 3 wiersze i od tego bym zaczął, np.

[ on-line ]

<article class="product">
  <!-- ----------------- row 1 ----------------- -->
  <div class="product-title">
    <h2>Converse Chuck Taylor All Star Low Top</h2>
  </div>
  <!-- ----------------- row 2 ----------------- -->
  <div class="product-info">
    <!--
      Tu mamy podział na 3 kolumny
      obrazek | product-description | product-details
    -->
  </div>
  <!-- ----------------- row 3 ----------------- -->
  <div>
    <button class="add-cart">Add to cart</button>
  </div>
</article>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  line-height: 1.4;
}
.product {
  display: flex;
  flex-direction: column;
  border: 4px solid black;
  width: 825px;
  margin: 50px auto;
  position: relative;
}

/* ----------------- row 1 ----------------- */
.product-title {
  text-align: center;
}
.product-title h2 {  
  font-size: 22px;
  text-transform: uppercase;
  background-color: #f7f7f7;
  padding: 15px;
}

/* ----------------- row 2 ----------------- */
.product-info {
  display: flex;
  height: 250px; /* korzystamy z faktu, że img ma height 250 */
}

/* ----------------- row 3 ----------------- */
/* BUTTON */
.add-cart {
  background-color: #000;
  border: none;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border-top: 4px solid black;
  transition: all 350ms;
}
.add-cart:hover {
  color: #000;
  background-color: #fff;
}

 

[ A Complete Guide to Flexbox ]

Answer 2

Korzystając z flexboxa, do ułożenia layoutu głównie używa się własności justify-content, align-items, gap. Marginesy i paddingi w dalszej kolejności lub w jakichś specjalnych przypadkach (np. automatyczny margines, aby odsunąć daną część elementów od drugiej). Weź też pod uwagę, że kontekst działania justify-content i align-items różni się w zależności od ustawionej osi flexboxa - głównej i poprzecznej (flex-direction zmienia je między sobą).

Możesz spróbować wprowadzić w swoim kodzie wspomniane propertisy flexa (usuwając też większość marginesów), a w razie dalszych problemów pokaż na czym utknąłeś (aktualizując kod).

Comments

Trochę lepiej to wygląda, ale dalej nie tak jak powinno, próbowałem z gap, ale nie działa w moim przypadku, w dodatku w takiej sytuacji jak napis "Free Shipping" nie ma sensu użycia bo działa tylko między elementami, a nie na zewnętrznych krawędziach.

https://jsfiddle.net/hfzn5bdk/52/

---

Według tego opisu

  <div class="product-info">
    <!--
      Tu mamy podział na 3 kolumny
      obrazek | product-description | product-details
    -->
  </div>

sprawdź:  on-line

---

Dziękuje spróbuje jeszcze zrobić według Twojego schematu samemu, chciałem dopracować swoją wersje według wskazówek ScriptyChris, ale póki co efekt jeszcze daleki od Twojego.