Understanding flexbox

[Gandalf]

Hi guys. I am trying to learn flex boxes and have been studying
flexboxin5.com and css-tricks.com/snippets/css/a-guide-to-flexbox/. I
have created a simple page layout with header, footer and 3 unequal
width columns.

I seem to have got it working as I resize the browser window, but I’m having trouble understanding how some of the properties work, especially flex-grow, flex-shrink and flex-basis (the flex shortcut). Getting suitable values for these seems to be something of a black art.

I realise I probably need to add some browser-specific prefixes. Can anyone see anything I have missed in the following (hoping I have the codepen link right!)?

http://codepen.io/gandalf458/pen/PqLzZY

[PaulOB]

@Gandalf

especially flex-grow, flex-shrink and flex-basis (the flex shortcut). Getting suitable values for these seems to be something of a black ar

Yes they are awkward and the best way to check is through trial and error like you are doing

I would simplify your three rules to this:

.column1 {
  flex: 1 0 200px;
  background: lightblue;
}
.main {
  flex: 4 0 300px;
  background: lightyellow;
}
.column3 {
  flex: 1 0 200px;
  background: lightgreen;
}

That tells the flexbox to make the side columns 200px and the middle column 300px and then whatever space is left in the container will be divided so that the middle column gets 4 times as much space as the other columns.

I still find it confusing as there are many ways to get approximately the same look but the differences are only noticeable when resizing and the grow,shrink and basis take effect.

[ralphm]

IMHO, it’s a mistake to use flexbox for a whole page layout. It’s not really designed for that. It’s more appropriate for a group of related elements (in a row or column), such as the three columns in the middle. I wouldn’t set the whole container to flexbox though. CSS grids will be better for that when they are ready for use.

[PaulOB]

@ralphm

CSS grids will be better for that when they are ready for use.

Yes, but I think it will be some time before grids can be used in live sites.

It’s best not to overdo flexbox and there are severe issues with re-ordering the content (text can’t be copied and tab order goes haywire) so it is best in small doses. In Gandalsf’s example above only the three columns need to be flex containers/children so it would probably be better to confine the flex properties to those columns only rather than the header and footer also (but that would mean adding another container div into the mix).

The benefit of the method used above is that the page is fully responsive (it goes from 3 columns to 2 columns to one column) without the need for any media queries at all.

I’m still struggling to get my head around all the behaviours of flexbox and have to resort to articles and videos to keep checking the details. Indeed even the article on CSS tricks shows a broken implementation of a 3 column layout (see my comments under the article) so I don’t think its intuitive for everyone yet.

[Gandalf]

Thanks @PaulOB and @ralphm. Both the articles I mentioned have whole page examples but I take the point that that’s not what flexbox was designed for. I’m sure taking the header and footer outside the flexbox won’t prove too difficult. Just something else for me to play with! I really like that the layout is responsive without any media queries.

Thanks again guys!