ugrás a tartalomhoz

Középre rendezés, auto width, fix szerkezet

asam9 · 2016. Szep. 19. (H), 22.49
Sziasztok,

Adott a következő struktúra:
<div class="container">
    <ul class="list">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>
</div>
Azt szeretném elérni – a HTML struktúra változtatása és JavaScript hozzáadása nélkül –, hogy a listaelemek legyenek egymás alatt és a szélességük legyen auto (azaz a szélesség annak tartalmától függjön) és a listaelemek legyenek középre igazítva úgy, hogy a középre rendezést kizárólag a konténer text-align: center-e, befolyásolja, tehát a gyermekelemekben ezt már ne kelljen még egyszer megadni. Mindehhez pedig csak a .list és .item class-okat lehet felhasználni.
Lehetséges ez? Ha igen, hogyan? (Ha csak flex-szel kivitelezhető, annak is örülök már)
Ha nem megoldható a fent írt feltételekkel, akkor más fajta megoldásokkal ne fáradjatok.
‹ Weboldal XML-ben Tipewriter ›
 ■
1

Eredmény

Hidvégi Gábor · 2016. Szep. 20. (K), 08.04
Mit sikerült eddig összehozni?
3

Nem sikerült összehozni :)

asam9 · 2016. Szep. 20. (K), 10.34
Nem sikerült összehozni :)
2

Erre gondoltál?

Endyl · 2016. Szep. 20. (K), 10.23
Erre gondoltál?
jsbin
.list {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
4

Köszönöm, ez éppen az, amire

asam9 · 2016. Szep. 20. (K), 11.06
Köszönöm, ez éppen az, amire gondoltam. Csak egy dolog nincs meg, hogy külön meg kell adni az align-items: center-t, amit én a konténer elemből szerettem volna szabályozni.

Leírom kicsit bővebben, hogy mi ez az egész, amiért ilyen extra megoldást keresek.
Csináltam egy komplett form template-et... kb. minden benne van, ami kell, többek közt Radio/Checkbox, Radio/Checkbox Group, stb.

Mindegyik elem, ami nem teljes szélességű, az inline-block, így ha valakinek olyan ízlésficama lenne, hogy középre akarja rakni a teljes form tartalmát, akkor csak egy text-align: center-t kell adnia a konténernek és kész is. Ez működik is szépen, a probléma akkor van, amikor az egymás mellett lévő radio/checkbox gombok szélesebbek, mint a befoglaló elem szélessége. Ezért betöltésre és resize-ra js-sel leszámolom az elemek szélességeit és azokat összeadva eldöntöm (a listákhoz adott class-szal), hogy törjenek-e egy sorba az elemek vagy sem.

Ezzel próbálkoztam: https://jsfiddle.net/c5faggtk/
De itt az inline-block-ot nem sikerült lecserélnem úgy, hogy a szélesség jól számolódjon, viszont így meg természetesen nem tudom megtörni a sort. Remélem érthető valamennyire.
5

Nem egészen értem a

Endyl · 2016. Szep. 20. (K), 14.34
Nem egészen értem a problémát, de van több megoldás is, hogy csak a .container módosításával hass a leszármazottaira, bár ízléstől és helyzettől függően változik ezeknek a "szépsége".
.container.középre > .list {
  align-items: center;
}
vagy
.container {
  align-items: center;
}
.list {
  align-items: inherit;
}
vagy css variables (csak kár, hogy ennek elég silány a támogatottsága).
6

Köszi ezt is, tök jó. Még

asam9 · 2016. Szep. 20. (K), 14.58
Köszi ezt is, tök jó. Még próbálkozom alternatívával, hátha. Van egy class-om, ami beállít egy text-align: center-t. Most ehhez hozzá kéne adnom az align-items: center-t, ami nem olyan szép, de ha nem lesz más, ez lesz... máshol úgysem flex-ezek. Mindenesetre tetszik az inherit megoldás, nem jutott eszembe.