0

This Jake Archibald article is frequently referenced in articles about Flexbox.

It suggests that flickering can occur on the page because content is loaded in different sections as the page loads, and then flexbox does it's calculations and stuff moves.

But, there's no mention of flex-basis and I'm wondering whether there's a reason that shouldn't be used for page layout? Maybe I'm missing something obvious.

.container {
  display: flex;
  flex-flow: row;
}
.main {
  background-color: red;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75%;
}
.sidebar {
  background-color: yellow;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 25%;
}
<div class="container">
  <div class="main">
    Main content
  </div>
  <div class="sidebar">
    Sidebar content
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • He uses `flex: 1` in his css which is basically a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`. See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – adamk22 Nov 03 '16 at 11:00
  • Yep. I'm wondering if there are any pitfalls with using `flex-basis: x` for page layout. – davidpauljunior Nov 03 '16 at 11:11
  • There are no pitfalls when using flex-basis *per se*, but you should be careful when using longhand properties. The spec recommends using the flex shorthand property instead. This is probably why you don't see the flex-basis longhand anywhere in the article. It is there, however, as a component of the flex property. I've covered this in more detail here: http://stackoverflow.com/q/34352140/3597276 – Michael Benjamin Nov 03 '16 at 11:39
  • 1
    @Michael_B Your answer to the question you linked is fantastic, thank you. – davidpauljunior Nov 03 '16 at 13:09

0 Answers0