flex-direction行不表现为行

Question

I have a flexbox grid that I'm using for some cards, however the cards when given the css property of flex-direction: row; will not actually behave as a row, but instead, will behave as column. I tried marking it as !important, however, it still will not behave as row. I would like each element to fit decently before going to a second line.

I've read this article many times trying to find out why it isn't behaving like I want to, but I haven't been able to hit the deal. Any idea why this is happening?

Here's a fiddle: https://jsfiddle.net/yisera/qtv5h5eb/

Answer 1

Your elements are behaving as a row. Each item is just so wide that it's wrapping around ( flex-wrap ), and you're getting what looks like a column.

Reducing the width of the .wall-panel s puts them back in a row-like formation.

https://jsfiddle.net/Hatchet/qtv5h5eb/2/