Shinji-san Shinji-san - 2 months ago 9
CSS Question

Flexbox align-items not working

So I am facing a little issue where the pictures aren't moving according to the

align-items
property in flexbox and I'm not sure why.

They just act as if I've applied
align-items: flex-start
, when I've set the width of my elements as 35% and the height to 100%.

The div of concern is the one called
'topi'
.

To sum up what layout I was going for (although it's slightly irrelevant but may help with this question):

I want two parent rows in the parent div. The top row has two sections and I want the bottom row to have 3+ sections columns.

I'm just not sure why the images aren't moving.

I mean I made the divs that the images were in flexboxes as well, although I thought that was irrelevant since making
'topi'
class have the property
align-items: center/space-around
, it should work on the divs that contain the images.

I would've thought that the images move along with the divs.

Can someone enlighten me on this?

P.S. Is the
topi
div rule useless because the images are in the divs so just a rule for
topi
should suffice, right? Thank you.



.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
height: 95vh;
width: 80%;
margin: 5% auto 8% auto;
background-color: white;
}
.top {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: flex-start;
}
.bottomi {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
height: 100%;
width: 100%;
background-color: red;
}
.topi {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: space-around;
width: 35%;
height: 100%;
;
background-color: white;
}
.topi div {
display: flex;
width: 100%;
height: auto;
}
.topi2 {
width: 65%;
height: 100%;
;
background-color: yellow;
font-size: 20px;
}
.top,
.bottom {
width: 100%;
background-color: green;
}
.top {
height: 60%;
}
.bottom {
height: 40%;
}
.top {
border: 1px solid green;
}
.bottom {
border: 1px solid pink;
}

<div class="container">
<div class="top">
<div class="topi">
<img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
<img src="george.jpg" width="209" height="205" alt="Picture of kid" />
</div>
<div class="topi2">
<p>Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sampleSample sample sample Sample sample sample
Sample sample sample Sample sample sample
</p>
</div>
</div>
<div class="bottom">
<div class="bottomi">
</div>
<div class="bottomi2">
</div>
<div class="bottomi3">
</div>
</div>
</div>




Answer

There's no such thing as align-items: space-around.

You need align-content: space-around.

align-items applies to a single-line in a flex container.

align-content applies to a multi-line flex container.

enter image description here

Comments