CSS FlexBox question

1

I’ve been writing a basic responsive grid to brush up on using SASS and Flexbox, and I ran into a question.

The flex property somewhat eliminates the need for a standard 12 column grid, but it’s nice to have sometimes.

I can think of 2 ways of implementing the grid. One is using the flex grow property(I’m using the SCSS syntax):

  @for $i from 1 through 11 {
    .size#{$i}-12 {
        flex:$i;
    }
  }

the other is to turnoff the flex property and define the width like I’d a float grid.

  @for $i from 1 through 11 {
    .size#{$i}-12 {
      flex: 0 0 auto;
      width: (100%/12)*$i;
    }
  }

The first method is very simple, but comes with the downside that if you don’t fill the container with columns of corresponding proportions, the lone element would simply grow to fill the size of the container.

The second method works out to be just like my float grid, you can have columns of relatively fixed-size exist by itself in a container, but it seems to defeat the purpose of using flexible boxes in the first place.

For those with some experience, how did you choose to define your column with in a flexbox grid? If you have a better way please let me know.

2

While flexbox can be used for a grid type layout, I would highly recommend using the actual grid capabilities of CSS.

That’s its whole purpose and grid layouts become very simple.

I know this doesn’t answer your question as regards to flexbox … but my answer is that I wouldn’t use flexbox for a grid at this point. I’d use grid!

1 Like
3

I’m actually iteratively working out using float, flexbox, and CSS-Grid on the same layout to achieve the same responsive effect.

While CSS grid makes it much simpler, it is still not quite as universally supported. I also cannot rule out running into legacy codes that uses flexbox layouts, so I’d like to cover my bases so to speak

4

Yes, that definitely makes sense and is certainly good practice building.

I’m much more hard-nosed about it. My projects are used solely on evergreen, up to date browsers. I can afford to say, “Upgrade your browser!” as I’m actually the one that handles that. :slight_smile:

Actually, my public website doesn’t even support IE at all anymore. When customers (or would be customers) reach out saying they can’t see my site, I simply tell them to use a switch browsers and point out that MS has stopped development of IE. (I give them a list, of course - basically everything but IE)