Hello,
To display 3 cards next to each other using CSS flex, you can use the flex-wrap
property with a value of wrap
, combined with the flex
property to set the size of each card. Here is an example:
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
<div class="card">Card 7</div>
<div class="card">Card 8</div>
<div class="card">Card 9</div>
</div>
CSS:
.card-container {
display: flex;
flex-wrap: wrap;
}
.card {
flex-basis: calc(33.33% - 10px); /* Set the width of each card to one-third of the container minus some margin */ margin-right: 10px; /* Add some margin between the cards */ margin-bottom: 10px; /* Add some margin below the cards */ background-color: #f5f5f5;
padding: 10px;
box-sizing: border-box;
}
In this example, the card-container
element is set to display: flex
, which makes its child elements align horizontally in a row. The flex-wrap: wrap
property allows the cards to wrap onto the next row when there isn’t enough space for them all to fit on one row. The flex-basis
property is used to set the width of each card to one-third of the container minus some margin, and the margin-right
and margin-bottom
properties add some spacing between the cards. The box-sizing: border-box
property ensures that the padding of each card is included in its width calculation.
Source: AI Interaction Channel
Happy Learning!
Break! I didn’t plan it. One day I just didn’t feel like opening Instagram—and then…
AI tools Let’s be real—AI sounds like either a robot apocalypse or something only tech…
Summer vacation is a great time for kids to explore, have fun, and learn new…
Goal: Understand transformers, large language models, and the architecture behind ChatGPT. Tutorial Suggestions: ✅ “Transformers…
Goal: Build apps or tools with ChatGPT or GPT-4 API. Tutorial Suggestions: ✅ OpenAI API…
Goal: Learn how to prompt better, write content, brainstorm, code, etc. Tutorial Suggestions: ✅ OpenAI's…