Flex keeps wrapping even after nowrap?

asasass · February 15, 2021, 3:17pm

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>

ladans37 · February 15, 2021, 3:32pm

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

asasass · February 15, 2021, 3:38pm

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

ladans37 · February 15, 2021, 3:42pm

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

asasass · February 15, 2021, 3:44pm

Yes.

ladans37 · February 15, 2021, 3:44pm

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

ladans37 · February 15, 2021, 3:52pm

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

asasass · February 15, 2021, 3:56pm

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

ladans37 · February 15, 2021, 3:57pm

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

ladans37 · February 15, 2021, 3:58pm

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

ladans37 · February 15, 2021, 4:05pm

this is a big head scratcher for me lol

ladans37 · February 15, 2021, 4:16pm

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

PaulOB · February 15, 2021, 4:21pm

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.

asasass · February 15, 2021, 4:27pm

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>

ladans37 · February 15, 2021, 4:28pm

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;
}

ladans37 · February 15, 2021, 4:29pm

And it will come out to this

PaulOB · February 15, 2021, 4:42pm

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).

asasass · February 15, 2021, 4:47pm

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>

PaulOB · February 15, 2021, 4:50pm

No you just ignored everything I said


.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.

asasass · February 15, 2021, 4:59pm

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");
}