Flex keeps wrapping even after nowrap?

[Gandalf]

Why have you got 3 classes that are exactly the same??? Makes no sense.

[ladans37]

@Gandalf right, only one is needed. Unless you give them different names, then you could use the shorthand all in one.

[asasass]

For if you want to add images.

[ladans37]

Did you get it worked out now?

[asasass]

Sort of.

Now I’m trying to remove these duplicates from the code.

I am not quite sure how it would be done.

code: https://jsfiddle.net/3m5f29na/1/

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

[ladans37]

Try something like .child 1, 2, 3 {

[asasass]

Got it, thanks.
code: https://jsfiddle.net/75kdLqpa/1/

.child1,
.child2,
.child3 {
  flex: 0 0 280px;
  height: 280px;
  margin: 20px;
}

.child1 {
  background-image: url("https://via.placeholder.com/280x280");
}

.child2 {
  background-image: url("https://via.placeholder.com/280x280");
}

.child3 {
  background-image: url("https://via.placeholder.com/280x280");
}

[ladans37]

. You can even add that background to the rest of the css. All in the same package.

[ladans37]

Thought you wanted your boxes to be blue

[arifbd8464]

@asasass

justify-content: space-around;

You can try this code…

.outer {
  max-width: 940px;
  height: 348px;
  background-color: #000;
}

.centersvg {
  display: flex;
  justify-content: space-around;
   height: 348px;
}
.image1 {
  background: red;
  width: 33%
}
.image2 {
  background: blue;
  width: 33%

}
.image3 {
  background: green;
  width: 33%

}