Some child elements choose to fill the parent column instead of wrapping the child content about flexboxgrid HOT 6 CLOSED

Direct childs of elements with display:flex; (normaly only the flex containers are set to display:flex;) automaticaly become flex items.

Because .col (a flex item) itself is set to display:flex; its children automaticaly also become flex items.

An a-tag, normaly an inline element, becomes a block element when it is a flex item.

You can set the columns to

[class*="col"] {
  display: initial;
}

if you don't need children of flex items automaticaly also become flex items.

Parent - display:flex; (flex container)
-- Child (automaticaly a flex item with display block)
---- Grandchild (normal element behavior)

Parent - display:flex; (flex container)
-- Child display:flex; (automaticaly a flex item with display block now also is a flex container)
---- Grandchild (now also automaticaly is a flex item with display block)

from flexboxgrid.

Thanks for clearing that up. If I use the first option:

Parent - display:flex; (flex container)
-- Child (automaticaly a flex item with display block)
---- Grandchild (normal element behavior)

Will it in anyway affect the grid system, nesting for example?

from flexboxgrid.

I don't think so. But I don't know exactly why .col is set to display:flex;. Take a look at the demo page where firstly every .col has a .box inside so you can avoid your a-tag problem. Secondly if you nest the grid in the demo every nested grid again has a .row.

from flexboxgrid.

Yes what @Aybee said. Thanks for helping to clear that up!

from flexboxgrid.

@kristoferjoseph
But why have you set .col to display:flex;? I think .cols only should be flex items and no flex containers. Can't you do it without that? Or are there some reasons you can't remember?

If I try the demo page without

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

on all .cols, then I can't find any difference. This all are properties which only belong to flex containers.

from flexboxgrid.

@Aybee the columns had display flex in order to allow you to add layout classes to a column. This was to support vertical layouts when not using a row. I didn't end up fleshing this out so possibly this could be added to a modifier class that enables column only layouts later on.

from flexboxgrid.