[css] Equal heights met wrapping items en flexbox

[_Thanatos_]

Ik doe equalheights tegenwoordig meestal met flexbox, gewoon omdat het zo makkelijk en soepel werkt, maar nu heb ik een ander patroon, nml een grid van 2x2 items waarbij allevier de items dezelfde hoogte moeten krijgen. Wat flexbox doet, is de items per rij een gelijke hoogte geven, en dat is niet gewenst. Ik wil dat ze allemaal even hoog worden.

Ik heb nu dit:

Cascading Stylesheet:

.box { display: flex; flex-flow: row wrap; }
.item { width: 50%; }

En dat geeft de items per rij een gelijke hoogte. Top Nouja, "bijna".

Ik heb al geprobeerd de items een height:50% te geven (denkende dat dat 50% van de box wordt, en dus gelijk), maar dat werkt niet. Een height:100% doet gek genoeg precies hetelfde. Ook heb ik geprobeerd met align-items:stretch en align-content:stretch op de box, maar gezien de box geen vaste hoogte heeft (en dat moet ook zo blijven ), doet dat niets.

Mijn wensen zijn: een pure CSS-oplossing, liefst zonder hacks. Javascript is geen optie. De browsers waarop het in ieder geval moet werken: Chrome, Firefox en IE (nieuwste versies). Bovenstaande code is wat uitgekleed en werkt wellicht niet overal, maar in het eggie gebruik ik Compass, dus een kreet als "je moet ook -webkit- of -ms- gebruiken" hoeft niet

Ik heb ook een fiddel gemaakt voor uw gemak
http://jsfiddle.net/5pws6f4n/

Dus tldr: hoe kan ik alle items in een wrapped flexbox container gelijke hoogte geven?

/edit
Ik heb een ultra-hackerige manier gevonden. Werkt. Sort of. Maar ik heb liever iets dat wat beter begrijpbaar is als ik er over een maand nog een keer naar kijk (of erger nog, iemand anders):
https://jsfiddle.net/5pws6f4n/3/

[ Voor 7% gewijzigd door _Thanatos_ op 14-07-2015 12:35 ]

[Tsjilp]

Jouw oplossing werkt niet als het eerste item de meeste content bevat.

Is de hoogte van de totale container bekend? Als je de box namelijk een fixed height geeft kun je de items wel een height van 50% geven.

Of alle bovenliggende elementen een height geven:
http://jsfiddle.net/jas9j78p/

[Struikrover]

Mits je de hoogte van het parent element in pixels of procent uitdrukt kun je dit inderdaad doen:

http://jsfiddle.net/5pws6f4n/8/

Omdat vertical spacing nogal moeilijk is met CSS is het wel een gepruts, maar deze CSS is in ieder geval minder onbegrijpbaar

[_Thanatos_]

Helaas, ik kan niet van tevoren weten hoe hoog de parent is. Maar met height:50% kom ik er ook niet. Daarmee geef je de flex-items feitelijk een vaste hoogte. Ik wil dat de hoogte van alle items even hoog is als die van de hoogste. Dat is wel even wat anders.

[Metian]

Is dit geen oplossing voor je probleem?

http://brm.io/jquery-match-height/

Hiermee kan je alle blokken een hoogte meegeven op basis van de hoogste blok.

Nuvermind, je hebt het specifiek over flexbox.

* Metian moet niet werken en tweaken te gelijk

[ Voor 27% gewijzigd door Metian op 13-08-2015 19:21 ]

[_Thanatos_]

Sorry voor de late reactie, maar nee idd, die jQuery-oplossing gaat em niet worden. Ik heb dat te vaak gebruikt en het heeft *nog nooit* goed gewerkt in de afgelopen 5000 jaar van mijn developcarrière. Er is altijd wel gezeik mee, hetzij als de content verandert, als andere afmetingen veranderen, als de bezoeker inzoomt, etc. En dan maar hopen dat de hoogte van het "source" element uberhaupt goed gemeten wordt, want zelfs dat doen niet alle "equalheights" plugins correct.

Ik heb het in m'n TS inderdaad over flexbox, maar als je een andere CSS-only oplossing weet (die niet een vieze hack is ), dan houd ik me natuurlijk aanbevolen. Dus specifiek flexbox is geen verplichting. Ik zie gewoon niet hoe je dit anders zou moeten doen.

CSS Grids is trouwens een aardige kandidaat, bedenk ik me nu, maar werkt helaas niet op voldoende browsers om in een productiewesbite nuttig te zijn.

[R4gnax]

_Thanatos_ schreef op woensdag 02 september 2015 @ 02:51:
Ik heb het in m'n TS inderdaad over flexbox, maar als je een andere CSS-only oplossing weet (die niet een vieze hack is ), dan houd ik me natuurlijk aanbevolen. Dus specifiek flexbox is geen verplichting. Ik zie gewoon niet hoe je dit anders zou moeten doen.

Heeft de content een bepaald breedte:hoogte aspect ratio? Dan heb je nl. nog wat trucjes met procentuele vertikale padding.