3
\$\begingroup\$

I'm using the flexbox for the first time for a responsive grid system. It seems to be working as far as I tested but want to make sure it works on others too and see ways to improve this.

Please see style.css for the grid system with flexbox on github.

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html, body{
  margin: 0;
}

/*
Layout with flexbox
*/
.container{
  max-width: 1200px;
  margin: 0 auto;
}
.container--small{
  max-width: 800px;
}
.row {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.col{
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;
}

/*
Extra Layout - 33%
*/
.col--30{
  -webkit-box-flex: 0 0 33.3333%;;
  -moz-box-flex: 0 0 33.3333%;;
  -webkit-flex: 0 0 33.3333%;;
  -ms-flex: 0 0 33.3333%;;
  flex: 0 0 33.3333%;;
}

/*
Media query
*/
@media (max-width: 768px) {
  .row > .col,
  .col--30 {
    -webkit-box-flex:  0 0 100%;
    -moz-box-flex:  0 0 100%;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}
<div class="row container">
    <div class="col">
      <div class="demostyle">1/3 - #1</div>
    </div>
    <div class="col">
      <div class="demostyle">1/3 - #2</div>
    </div>
    <div class="col">
      <div class="demostyle">1/3 - #3</div>
    </div>
  </div>

\$\endgroup\$
1
  • \$\begingroup\$ It would be nice if you could include the css for demostyle in this particular css section . Although, I found it in demo.css others may not. Cheers. \$\endgroup\$
    – Tolani
    Commented Aug 16, 2016 at 15:35

1 Answer 1

Reset to default
1
\$\begingroup\$

Here is my analysis:

  • Well formatted
  • Both backwards and forwards compatible
  • Has both block and inline comments

The only thing would be wary of is the margin: 0 on the html, body selector may not work as expected on newer iPhones to Safari's new behavior:

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

The inset area is filled with the page's background-color (as specified on the <body> or <html> elements) to blend in with the rest of the page. For many websites, this is enough. If your page has only text and images above a solid background color, the default insets will look great.

The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11.

The default value of viewport-fit is auto, which results in the automatic insetting behavior seen above. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. After doing so, our viewport meta tag now looks like this:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.