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

Frank Friberg
Frank Friberg
7,704 Points
Posted by Frank Friberg
Frank Friberg
7,704 Points

Flex-box behave strange

I'm trying to create a flex-box grid but have some problems. I have made the grid to be 5 columns wide with the possibility to choose any amount of columns less than that. The problem is that when I try to use any justify-content or align-items attribute the columns behave differently from when I apply it to for example a .1-4 class column than a .1-5 column class. I'll post the CSS and HTML below so you can see that it's the exact same method used.

The CSS for the grid:

.center {justify-content: center; }

.s-auto, .s1-1, .s1-2, .s1-3, .s2-3, .s1-4, .s2-4, .s3-4  {
  display: flex;
  flex-direction: columns; }
.s-auto {
  flex: 1 1 auto; }
.s1-1 {
  flex: 1 1 100%;
  max-width: 100%; }
.s1-2 {
  flex: 2 1 50%;
  max-width: 50%; }
.s1-3 {
  flex: 3 1 33.33333%;
  max-width: 33.33333%; }
.s2-3 {
  flex: 3 1 66.66667%;
  max-width: 66.66667%; }
.s1-4 {
  flex: 4 1 25%;
  max-width: 25%; }
.s2-4 {
  flex: 4 1 50%;
  max-width: 50%; }
.s3-4 {
  flex: 4 1 75%;
  max-width: 75%; }
.s1-5 {
  flex: 5 1 20%;
  max-width: 20%; }
.s2-5 {
  flex: 5 1 40%;
  max-width: 40%; }
.s3-5 {
  flex: 5 1 60%;
  max-width: 60%; }
.s4-5 {
  flex: 5 1 80%;
  max-width: 80%; }

The HTML:

<div class="s3-5 center>
  <div class="s3-5 center">
    <div class="s3-5 center">
      S1-2
    </div>
  </div>
</div>

As you can see, there is no difference between the 4 columns and the 5 columns. I have also tried changing the flex-grow property to the same for all sizes, but no luck.

Nelson Canro
Nelson Canro
7,548 Points

I think this video will help you: https://www.youtube.com/watch?v=Zp0EgJUSIHk

Frank Friberg
Frank Friberg
7,704 Points
Frank Friberg
Frank Friberg
7,704 Points

Thanks but it didn't really help me out, got a better understanding of flexbox though, and might alter the code a bit. But I still can't figure out why there is a bug or if it is a bug...

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

It's a bit difficult to debug your code the way it is now.

Try either adding all of your HTML (with some dummy content) and CSS to a CodePen and sharing that with others here.

Also, you might want to try using a 'flexbox playground' such as Flexy Boxes or Flexie.

I also found the article A Complete Guide to Flexbox on CSS Tricks to be invaluable when building my site with a flexbox layout.

Frank Friberg
Frank Friberg
7,704 Points
Frank Friberg
Frank Friberg
7,704 Points

Thanks for the help, I had a typo and once I fixed it eveything got ruined so I have to start from the bottom