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

Problem z pozycjonowaniem flexboxów

VPS Starter Arubacloud
0 głosów
178 wizyt
pytanie zadane 9 marca 2023 w HTML i CSS przez KonDZIKs Bywalec (2,770 p.)
edycja 9 marca 2023 przez KonDZIKs

Witam.

Mam problem z pozycjonowaniem się elementów. Jak widać na zamieszonym obrazie, pierwszy kwadrat pozycjonuje się dobrze z tytułem oraz opisem. A pozostałe dwa nie. Pozycjonują się tak jakby pomiędzy kwadraty a nie do kwadratów.
A drugi problem to pozycjonowanie się opisu względem tytułu. Jak widać na obrazie rozjeżdża się. Dzieje się tak np. przy zamianie font-size w opisie.

https://jsfiddle.net/api/post/library/pure/

 

Dziękuję za pomoc.

 

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style type="text/css">

.box {
    display: flex;
    flex-direction: column;
    align-items: center;  
    }

.main_txt{
 margin-top: 0px;
 text-align: center;
 text-shadow: 3px 3px 3px #a9a9a9;
 font-size: 38px;
}
.main_txt  h3
{
 margin-top: -8px;
 margin-bottom: -2px;
 font-weight: 400;
}

.font{
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
}

.square{
  border-radius: 25px;
  flex: 1;
  display: flex;
  width: 360px;
  height: 222px;
  background-color:#ab2e12;
  margin: 10px;
  font-size:0;
  text-align: center;
}

.material-symbols-outlined {
  align-items:center;
  justify-content: center;
  color: white;
  font-size: 200px;
    flex: 1;
  display: flex;
}

.title{
flex:1;
display: flex;
font-size: 25px;
font-weight:700;
}

.desc{
  flex:1;
  display:flex;
  align-items: flex-start;
  padding-top: 10px;
  border-top: 3px solid #ab2e12;
   border-bottom: 3px solid #ab2e12;
  font-size: 20px;
  }

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;  
    }

.about_us{

  display:felx;
  flex:1;
  font-size: 20px;
  margin-top: 10px; 
  color:white;
  text-align: justify;
  background-color:#ab2e12;
  padding: 15px;
  border-radius: 25px;
  font-weight: 500;
  }

.about_us_title{
  display:felx;
  flex:1;
  font-weight: 700;
  font-size:30px;
  margin-top: 20px; 
}

@media (max-width: 800px) {
  .font, .title {
    flex-direction: column;
  }
}
</style>
<div clas="codepen">
<div class="main_txt"><h3>Centrum Zarządzania <strong>Nieruchomościami</strong></h3></div>
<div class="font">

  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">attach_money</span>
    </div>
    <div class="title">Brak prowizji</div>
    <div class="desc">Nie pobieramy od Państwa żadnych prowizji</div>
  </div>


  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">campaign</span>
    </div>
    <div class="title">Kampania reklamowa</div>
    <div class="desc">Zajmujemy się profesjonalną kampanią reklamową Państwa nieruchomości. Zapraszamy do skorzystania z naszej darmowej miesięcznej kampani reklamowaj.</div>
  </div>

  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">handshake</span>
    </div>
    <div class="title">Brak pośrednictwa</div>
    <div class="desc"> Nie pośredniczymy podczas procesu sprzedaży nieruchomości. Umawiają się Państwo samodzielnie z potencjalnym klientem.</div>
  </div>

  <div class="box">
    
  </div>
</div>
<div class="box2">
<div class="about_us_title"> Jak działamy?</div>
<div class="about_us">Naszym głównym zadaniem jest pomóc Państwu w jak najszybszej sprzedaży nieruchomości poprzez stworzenie profesjonalnej kampanii reklamowej. Dzięki temu jesteśmy w stanie w krótkim czasie trafić do szerokiego grona potencjalnych klientów. Nasza kampania reklamowa opiera się głównie na ogłaszaniu Państwa nieruchomości na wielu portalach internetowych oraz social mediach. Nasza firma nie pobiera przy tym żadnych prowizji ponieważ nie uczestniczymy w procesie sprzedaży. Cały kontakt odbywa się pomiędzy klientem a właścicielem. Jeżeli życzą sobie Państwo całkowitą obsługę biura, jesteśmy jak najbardziej do Państwa usług.  
</div>
</div>

 

1 odpowiedź

+2 głosów
odpowiedź 9 marca 2023 przez SzkolnyAdmin Szeryf (86,280 p.)
wybrane 9 marca 2023 przez KonDZIKs
 
Najlepsza
Dla klas "square" i "title" usuń flex: 1. Ta własność powoduje rozciąganie górnych bloków.
komentarz 9 marca 2023 przez KonDZIKs Bywalec (2,770 p.)
SUPER, dziękuje Ci bardzo. Jeszcze pozostała kwestia tego, że desc nie pozycjonuje się względem square. Niezbyt rozumiem dlaczego tak się dzieje. Wszystko jest tak samo ustawione jak w dwóch pozostałych (square i title) a się rozjeżdża. Nawet 1 element jest dobrze wypozycjonowany

A tak apropo flex: 1 to służy do tego żeby dane elementy w wierszu pozycjonowały się względem siebie? W sensie jak długi będzie najdłuższy element tak wypozycjonuje się reszta?
komentarz 9 marca 2023 przez SzkolnyAdmin Szeryf (86,280 p.)

Nie, własność flex to skrót dla trzech innych własności i nie służy do pozycjonowania. Tu więcej: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Spróbuj ustawić boxy równej wielkości (i usuń czwarty z nich - jest pusty).

komentarz 9 marca 2023 przez KonDZIKs Bywalec (2,770 p.)

Jak ustawiłem width na 360px to boxy się zjechały jak ustawiłem na 400px to i tak miały stałą wartość 380.

Problem rozwiązany trzeba było ustawić 'disc' na 360px rozmiar square.

A jeszcze będę miał jedno pytanie. Jak mamy main_txt to w wersji mobilnej nie mieści się na ekranie podobnie jest ze square czy trzeba to ustawić w taki sposób: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

Czy dodać resztę sekcji tak jak tutaj dodałem (tak wiem to jest żeby elementy flex przechodziły w kolumnie nie w wiersz):

@media (max-width: 800px) {
  .font, .title {
    flex-direction: column;
  }

Podobne pytania

–1 głos
1 odpowiedź 95 wizyt
pytanie zadane 6 maja 2020 w HTML i CSS przez AdamKe Nowicjusz (200 p.)
0 głosów
0 odpowiedzi 125 wizyt
pytanie zadane 4 lutego 2022 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)
+1 głos
0 odpowiedzi 190 wizyt
pytanie zadane 3 lutego 2022 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 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!

...