• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Flexbox - umieszczenie elementów obok siebie

VPS Starter Arubacloud
0 głosów
268 wizyt
pytanie zadane 17 listopada 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)
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ć.
komentarz 18 listopada 2022 przez VBService Ekspert (251,210 p.)

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

2 odpowiedzi

0 głosów
odpowiedź 17 listopada 2022 przez VBService Ekspert (251,210 p.)
edycja 18 listopada 2022 przez VBService

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 ]

0 głosów
odpowiedź 17 listopada 2022 przez ScriptyChris Mędrzec (190,190 p.)

Korzystając z flexboxa, do ułożenia layoutu głównie używa się własności justify-contentalign-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).

komentarz 17 listopada 2022 przez jasper93 Obywatel (1,310 p.)
edycja 18 listopada 2022 przez jasper93
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/
1
komentarz 18 listopada 2022 przez VBService Ekspert (251,210 p.)

Według tego opisu

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

sprawdź:  on-line

komentarz 18 listopada 2022 przez jasper93 Obywatel (1,310 p.)
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.

Podobne pytania

0 głosów
2 odpowiedzi 1,793 wizyt
pytanie zadane 14 listopada 2019 w HTML i CSS przez Michał_Warmuz Mądrala (5,830 p.)
0 głosów
1 odpowiedź 585 wizyt
pytanie zadane 16 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
0 głosów
2 odpowiedzi 165 wizyt
pytanie zadane 29 sierpnia 2017 w HTML i CSS przez jjanek Użytkownik (630 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...