asasass
February 15, 2021, 3:17pm
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>
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
3
Do you want to have spacing between the red bars? I’m guessing that’s what you’re looking to do.
Ok, I’ll see if I can work something out for you.
I don’t seem to see anything morphing into one another
asasass
February 15, 2021, 3:56pm
8
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.
this is a big head scratcher for me lol
So you want something like this, but with the red behind blue…
PaulOB
February 15, 2021, 4:21pm
13
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
asasass
February 15, 2021, 4:27pm
14
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
PaulOB
February 15, 2021, 4:42pm
17
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
18
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
19
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.
3 Likes
asasass
February 15, 2021, 4:59pm
20
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");
}