Autor Zpráva
wordikkk
Profil *
Ahoj,
řeším problém s využítím flexboxu a zárovnání v obsahu v něm. Potřebuji mít vedle sebe 5 responzivních sloupců a každý z nich obsahuje nadpis jiné délky, obrázek stejné velikosti a dále tlačítko Zjistit více, které by se mělo zobrazit úplně na konci kontejneru, tzn.:
xxxNADPISxxx...........xxxNADPISxxx
xxxOBRÁZEKxxx.........xxxOBRÁZEKxxx
xxxxxxxxxxxxxx.......xxxxxxxxxxxxxx
xxxTLAČÍTKOxxx........xxxTLAČÍTKOxxx

HTML:
<div class="row containerx">
    <div class="col-xs-12 col-sm-2 col-sm-offset-1 col-md-2 col-md-offset-1 box itemx">
        <div class="title"><h3>Lorem ipsum dolor sit amet</h3></div>
        <div class="image"><img src="assets/img/image.jpg" class="img-responsive" /></div>
        <div class="text">
            <input type="submit" value="Zjistit více">
        </div>
    </div>

    <div class="col-xs-12 col-sm-2 col-md-2 box itemx">
        <div class="clinic-title"><h3>Lorem ipsum dolor sit</h3></div>
        <div class="clinic-image"><img src="assets/img/image.jpg" class="img-responsive" /></div>
        <div class="text">
            <input type="submit" value="Zjistit více">
        </div>
    </div>
    ...
</div>

CSS:
.box{
    border:1px solid #005fb9;
    margin-top:20px;
}
.containerx {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: flex-end;
}
.itemx {
  margin: 5px;
}

Aktuální stav:
Kcko
Profil
.itemx {
  margin: 5px;
  display: flex;
  flex-wrap: wrap;
}


.itemx .text
{
  align-self: flex-end;
}
wordikkk
Profil *
Kcko:
Ahoj,
super to je ono! Děkuji moc za rychlou odpověď.
Anonymouz
Profil *
Mám kontaktní formulář, který je poskládaný na dva sloupce. kde captcha a tlačítko odeslat je v levém sloupci. Potřeboval bych přijít na to, jak na mobilní verzi přesunout captchu a tlačítko odeslat uplně na poslední místo. Zkoušel jsem to přes flex box viz odkaz. Pomůže mi s tím někdo?

Živá ukázka
Kcko
Profil
Anonymouz:
Takhle: Živá ukázka
Ale je to celkem prasárna, radši bych vytvořil druhý formulář jen pro mobilní zobrazení nebo to udělal uplně celé jinak.
Anonymouz
Profil *
Mrknul jsem na to, ale bohužel se mi kočka se salátem dostává mezi captchu a tlačítko odeslat. Celé to udělat jinak máš na mysli bez pomoci tabulky, nebo úplně jiné rozložení?
Kcko
Profil
Anonymouz:
Živá ukázka

Upřímně, tím jak idiotsky je to pojmenované se v tom ztrácím a nevidím ani smysl takové tabulky a dělat takové harakiri, abys něco někam přesunul; ale ted máš ukázku dle toho jak sis přál.
Anonymouz
Profil *
Je to normální kontaktní formulář. V příkladu je psané pouze lorem ipsum, protože si myslím, že to pro ukázku stačí. Šlo by tam napsat inputy atd., ale takto to jako mustr stačí. Je jedno jak se který input jmenuje.

Prostě jde pouze o to, že formulář má být rozdělen na dva stejně dlouhé sloupce (bez mezer), přičemž je požadavek, aby kontaktní informace byli vlevo a doplňkové o produktu vpravo. Proto je to na PC rozdělené takto. Jenže na mobilní verzi by to znamenalo, že captcha a tlačítko odeslat by bylo uprostřed formuláře, což není ideální, když ještě následují buňky k vyplnění. Myslel jsem, že když flexbox dovede pracovat s pořadím, že na tohle bude dobrá volba, ale vidím, že s ním jsou pouze problémy.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: