I’m working through some self guided coding curriculum and currently doing a small project building a holy grail layout with flexbox. Here is my codepen https://codepen.io/clayco/pen/KKeNjrm
Currently, all of the cards are displayed under the sidebar when they should be to the right of it.
I’m guessing it has something to do with the flex direction of the body being set to column, but I’ve tried changing the flex directions around and it doesn’t help the problem.
Anyways, here’s my code.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
align-items: center;
display: flex;
text-indent: 16px;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
width: 300px;
background: royalblue;
display: flex;
min-width: 300px;
height: calc( 100vh - 72px);
flex-direction: column;
gap: 50px;
}
.container {
display: flex;
flex-grow: 1;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
flex: 1 1 250px;
}
.cards {
padding: 32px;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
gap: 50px;
width: 1000px;
}<div class="header">
MY AWESOME WEBSITE
</div>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="#">⭐ - link one</a></li>
<li><a href="#">🦸🏽♂️ - link two</a></li>
<li><a href="#">🖌️ - link three</a></li>
<li><a href="#">👌🏽 - link four</a></li>
</ul>
</div>
</div>
<div class="cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>Thanks so much
>Solution :
create one common parent div for container and cards
example
<div class="parent-element" style="display:flex; align-items="flex-start"">
<div class="container"></div>
<div class="cards"></div>
</div>