Flex keeps wrapping even after nowrap?

HTML-CSS
1

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>
2 
flex-flow: nowrap;

Is that the right way to set that? The ‘flex-flow’ prop is the combining of flex-direction and flex-wrap. So, I would expect:

flex-flow: row nowrap;

or whatever. If you just want to set the wrap, then I’d expect

flex-wrap: nowrap;

unless I’m misunderstanding. This is a great reference, by the way.

1 Like
3

I got it.
code: https://jsfiddle.net/h8g9ysa4/3/

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.