Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Joseph Torres
Joseph Torres
6,282 Points
Posted by Joseph Torres
Joseph Torres
6,282 Points

Flexbox use instead of CSS positioning...

I have been using Flexbox and I find it so much easier than the display and position properties and float. Can Flexbox be used instead of those properties? After playing with Flexbox Froggy which was great, layouts have been a little easier. Also if with Flexbox is also for responsive design, how come they use media queries as well? Just newbie questions..

1 Answer

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Hi Joseph,

There was a time not that long ago when Flexbox wasn't compatible on all of the browsers. It has now been adopted on all modern browsers and now it has become very popular to use for layouts.

Big projects such as Bootstrap are now using Flexbox for their layouts: https://v4-alpha.getbootstrap.com/layout/grid/

As a developer I love the flexibility Flexbox gives you, pun not intended. I use a Flexbox layout for pretty much every new project I work on.

To your second question about media queries. Media queries are what make something responsive, the Flexbox layout will still need to use media queries to change column widths etc depending on the screen width.

Let me know if you have any questions.

Joseph Torres
Joseph Torres
6,282 Points
Joseph Torres
Joseph Torres
6,282 Points

Thank you so much, I love Flexbox a lot. I was breaking my head trying to figure out the best way to understand the media queries, floats and positioning for a responsive site. When creating a responsive site using Flexbox, I should use for example width 100% for a wrapper correct? I see people use max-width 960 px and width 100% at the same time which I just dont understand why.. Can you shed some light on this?

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Glad I could help. So when you see containers/wrappers with a max-width they won't use Flexbox directly. Instead they will use a parent container/wrapper to condense all of the content on the page to a maximum set width. Inside that container they will then use Flexbox to create the layout.

A great example is Bootstraps layout grid:

<!-- The container will have a max-width and will have a horizontal margin set to auto so it displays center in the browser. -->
<div class="container">
  <!-- The row is where display:flex is activated -->
  <div class="row">
    <!-- The columns a flex item. The class col-6 will use a max-width and flex of 50%. Max width is used as well as flex for compatibility purposes. -->
    <div class="col-6">
      1 of 2
    </div>
    <div class="col-6">
      1 of 2
    </div>
  </div>
</div>

I hope this makes a little bit of sense.

Flexbox can be used within any parent element.

Markus Mönch
Markus Mönch
16,383 Points
Markus Mönch
Markus Mönch
16,383 Points

Flexbox isn't perfect. The old way will be still used to this day. Especially with the complex JavaScript. You still need to learn how to do it wihtout flexbox.

Flexbox is just another tool in CSS we can use for certain tasks.

Try to make off-canvas menu or something like that in flexboxm you can't. FLexbox is CSS, but this is one of many tools CSS has to offer for the job to be done.