How to align boxes horizontal in CSS flex? - html

Question

I've been trying to align my boxes horizontally, but haven't been able to resolve the issue. Each time I try to, they become stacked horizontally. Rather than centered straight across. Or will just remain stacked in a column(vertically).
HTML for box divs:
<div class="section2">
<h1 class="s2h1">This is Random Info</h1>
<div class="boxes">
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
</div>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">Placeholder Text</h5>
</div>
</div>
</div>
</div>
</div>
CSS for box div
.b1container {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffdeab;
border-radius: 10px;
transition: 0.5s;
cursor: pointer;
}
.b1container:hover {
width: 250px;
height: 250px;
}
.s2boxImg {
width: 100px;
height: 100px;
border-radius: 5px;
border: 3px dotted #553c2b;
transition: 0.5s;
}
.s2boxImg:hover {
width: 250px;
height: 250px;
border: 3px dotted #f36dcb;
transition: 0.5s;
}
.boxes {
display: flex;
justify-content: space-evenly;
justify-content: center;
margin-top: 30px;
}
Stacked Boxes
I have tried to use flex direction row, I used justify content to make sure everything was centered. I attempted to move the divs around to make sure everything was within the correct div. I also tried to space-evenly the div box itself labeled as "box".

Answer 1

You have nested all .box elements a few levels deep inside .boxes, that is why they are stacked. Make all .box elements direct decendants of .boxes and it will work.
The flexbox mechanism only work one level deep: a parent flexbox container element (.boxes) contains flexed child elements (.box). Any element inside a .box is unaffected, or better, unhandled by the flexbox mechanism. That is why the main structure in your case should be:
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
I also added flex-flow: row wrap to make .box elements wrap to the next line when required.
.b1container {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffdeab;
border-radius: 10px;
transition: 0.5s;
cursor: pointer;
}
.b1container:hover {
width: 250px;
height: 250px;
}
.s2boxImg {
width: 100px;
height: 100px;
border-radius: 5px;
border: 3px dotted #553c2b;
transition: 0.5s;
}
.s2boxImg:hover {
width: 250px;
height: 250px;
border: 3px dotted #f36dcb;
transition: 0.5s;
}
.boxes {
display: flex;
flex-flow: row wrap; /* ADDED to make content wrap */
justify-content: space-evenly;
justify-content: center;
margin-top: 30px;
}
<div class="section2">
<h1 class="s2h1">This is Random Info</h1>
<div class="boxes">
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
</div>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
</div>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
</div>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg">
</div>
<h5 class="b1Info">Placeholder Text</h5>
</div>
</div>
</div>

Answer 2

Try adding this CSS rule:
.box {
display: flex;
flex-wrap: nowrap;
}
You're making the div boxes flex, but the div which really contains the boxes is the box div.

Answer 3

just add the flex-direction which take either row or column
b1container {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction :row;
background-color: #ffdeab;
border-radius: 10px;
transition: 0.5s;
cursor: pointer;
}
here is a link that explains flexbox really well
Basic concepts of flexbox
If you don't want the items to wrap when the width gets smaller you could use flex-wrap
which you can give nowrap attripute flex-wrap:nowrap;

Answer 4

the .box is not flex, and is he that is holding the boxes
try this:
.box {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
this code will put your boxes aligned
if you want to do add a prefix size to each box you can try:
.box > * {
flex: 0 0 25%;
width: 100%;
max-width: 25%;
}
with this you can set the box class to wrap, and you have 4 columns per row.

Answer 5

I think your CSS styling is correct. However, the HTML is structured incorrectly. It is logical that the div.boxes include a bunch of div.box. And each div.box has box contents; like in your case div.b1container and an h5 tag. You, however, have nested div.box inside div.box instead of div.boxes.
Here's a figure of how it should be structured:
Here's the corrected HTML file:
<div class="section2">
<h1 class="s2h1">This is Random Info</h1>
<div class="boxes">
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg" />
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
</div>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg" />
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
</div>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg" />
</div>
<h5 class="b1Info">PlaceHolder Text</h5>
</div>
<div class="box">
<div class="b1container">
<img src="" alt="Placeholder" class="s2boxImg" />
</div>
<h5 class="b1Info">Placeholder Text</h5>
</div>
</div>
</div>