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ěď.

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: