Flex keeps wrapping even after nowrap?

The boxes keep morphing into each other, how do I prevent this?
It keeps taking 3 images and combining them into 1.
And I don’t want the boxes to get squished together.
The boxes should stay the same size and not change.

code: https://jsfiddle.net/v7f1ohba/1/

.outer {
  max-width: 940px;
  height: 348px;
  background-color: #000;
  margin: 0 auto;/* top+bottom  left+right */
}

.centersvg {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  justify-content: space-around;
}
div {
  height: 348px;
  background: red;
}


.image1 {
  float: left;
  width: 280px;
  height: 280px;
  background: #13b4ff;

}

.image2 {
  float: left;
  width: 280px;
  height: 280px;
  background: #13b4ff;

}

.image3 {
  float: left;
  width: 280px;
  height: 280px;
  background: #13b4ff;

}
<div class="outer">

  <div class="centersvg">
    <div class="image1">
    </div>

    <div class="image2">
    </div>

    <div class="image3">
    </div>
  </div>
</div>

Try white-space:nowrap instead of flex-flow. I don’t think this one has a nowrap property like white-space does.

I tried here, it did not work. https://jsfiddle.net/ynebr405/1/

Do you want to have spacing between the red bars? I’m guessing that’s what you’re looking to do.

Yes.

Ok, I’ll see if I can work something out for you.

I don’t seem to see anything morphing into one another

It does when you make the browser window smaller and larger.

1 Like

Right, I can see that. Ok, still working on it.

Even on JS Fiddle when you make the window bigger n smaller.

:thinking: this is a big head scratcher for me lol

So you want something like this, but with the red behind blue…

They are flex items so use the flex rules for them.

e.g.

flex:0 0 280px;

.image1 {
 flex:0 0 280px;
  width: 280px;
  height: 280px;
  background: green;
}

i.e. don’t shrink or grow but be 280px wide = flex:0 0 280px;.

Get rid of the floats as these are flex-items and will align horizontally by default (unless you are building in some sort of support for very old browsers).

Also don’t use 3 different classes when they all have the same rules. Just use the one class.

1 Like

Is this what you mean?
code: https://jsfiddle.net/gkuwq861/

Also, how come display: flex; needs to be written twice?

Is there a way to remove the 2nd one?

.parent {
  display: flex;
  background-color: red;
  width: 940px;
  height: 348px;
  justify-content: space-around;
  align-items: center;
}

.center {
  display: flex;
}

.child1 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}

.child2 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}

.child3 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}
<div class="parent">
  <div class="center">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</div>

Ok I think I have what you need, but also think @PaulOB may be closer to what you need. Here is what I have

<div class="outer">

  <div class="centersvg">
  
    <div class="redbox1">
    <div class="image1">
    </div>
    </div>
     
    <div class="redbox2">
    <div class="image2">
    </div>
    </div>

    <div class="redbox3">
    <div class="image3">
    </div>
    </div>
    
  </div>
</div>
.outer {
  max-width: 940px;
  height: 348px;
  background-color: none;
  margin: 0 auto;/* top+bottom  left+right */
}

.centersvg {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  justify-content: space-around;
}
div {
  height: 348px;
  background: none;
}


.image1 {
  float: left;
  width: 280px;
  height: 280px;
  background: #13b4ff;
  margin-top:30px;
  margin-left:5px;

}

.image2 {
  float: left;
  width: 280px;
  height: 280px;
  background: #13b4ff;
  margin-top:30px;
  margin-left:5px;

}

.image3 {
  float: left;
  width: 280px;
  height: 280px;
  background: #13b4ff;
  margin-top:30px;
  margin-left:5px;

}

.redbox1 {
  background:red;
  height:348px;
  width:348px;
  margin-right:12px;
  padding-left:8px;
  padding-right:25px;
}

.redbox2 {
  background:red;
  height:348px;
  width:348px;
  margin-right:12px;
  padding-left:25px;
  padding-right:25px;
}

.redbox3 {
  background:red;
  height:348px;
  width:348px;
  margin-right:12px;
  padding-left:25px;
  padding-right:15px;
}

And it will come out to this

Why do you need the center element at all? You show no reason for it.

Don’t rely on width on flex-items as I mentioned above. Width can be over-written by the flex behaviour.

Also in your first example you put a max-width of 940px on outer but essentially you have 3 fixed width items that you don’t want to shrink so the max-width is pointless. You could have just set a width and avoided your problem (but of course that doesn’t work for responsive design if you want the page to get smaller).

Fixed, I think this one is set up better now.

code: https://jsfiddle.net/gkuwq861/1/


.parent {
  display: flex;
  background-color: red;
  width: 940px;
  height: 348px;
  justify-content: space-around;
  align-items: center;
}

.child1 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}

.child2 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}

.child3 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    </div>

No you just ignored everything I said :slight_smile:


.parent {
  display: flex;
  background-color: red;
  width: 940px;
  height: 348px;
  justify-content: space-around;
  align-items: center;
}

.child {
  flex:0 0 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

That’s all you need.

3 Likes

If I want to add pictures in.

Then like this:
code: https://jsfiddle.net/3m5f29na/1/

And then I have to get rid of the duplicate codes.

Can this all be put into 1 class?

.box { 
 flex: 0 0 280px;
  height: 280px;
  margin: 20px;
}


.parent {
  display: flex;
  background-color: red;
  width: 940px;
  height: 348px;
  justify-content: space-around;
  align-items: center;
}

.child1 {
  flex: 0 0 280px;
  height: 280px;
  margin: 20px;
 background-image: url("https://via.placeholder.com/280x280");
}

.child2 {
  flex: 0 0 280px;
  height: 280px;
  margin: 20px;
 background-image: url("https://via.placeholder.com/280x280");
}

.child3 {
  flex: 0 0 280px;
  height: 280px;
  margin: 20px;
 background-image: url("https://via.placeholder.com/280x280");
}