Qasim Arif Qasim Arif - 3 months ago 15
CSS Question

How to make flexbox divs full width

What I'm trying to do is make each one of those 'divs' in the 'aside' tag to be full-width using flexbox.

The width of the sidebar is 25% however the divs don't fill in the space on the left & right side. I can add padding to each side but it get's a bit messy and ruins the

align-items: center


If you run the below at full screen, you'll see what I mean.



aside {
display: flex;
height: 100vh;
width: 25%;
flex-direction: column;
align-items: center;
}
aside div {
padding: 89.9px;
}
.test1 {
background-color: gray;
}
.test2 {
background-color: red;
}
.test3 {
background-color: blue;
}
.test4 {
background-color: green;
}
.test5 {
background-color: orange;
}

<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css">
</head>

<body>

<aside>
<div class="test1">234324</div>
<div class="test2">232</div>
<div class="test3">3234324234</div>
<div class="test4">2344</div>
<div class="test5">234234234233245</div>
</aside>

</body>

</html>





I've achieved it below (see image) without using flexbox but I'd really like to make it work with flexbox.

Without flexbox

Answer

If you remove "align-items:center;" it will force the divs to take up the whole space within the column.

If you decide you want space in between or whatever, or you need to have them aligned, use can use justify-content:center; which will still have them take up the whole div.