What is the best way to display cards alongside each other in HTML using flexbox?

I created 6 unique cards and intended to display them on my website in a sequence of 3 + 3. However, some cards are not appearing as expected.

When I refer to a 3 + 3 sequence, I mean that the first row should contain 3 cards and the second row should also contain 3 cards.

You can test the code snippet to see what the outcome looks like.

Below is the code-

.cardsForhhiae {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-radius: 10px;
}

.cardsForhhiae p {
  font-family: 'Roboto', sans-serif;
  background-color: #68b0ab;
  padding: 20px;
  font-size: 20px;
  color: #000;
  margin: 2%;
  border-radius: 10px;
  box-shadow: 0 0 7px 0px;
}
<div class="cardsForhhiae">

  <p>
    Example card content goes here.
  </p>

  <p>
    More content for another card.
  </p>

  <p>
    Additional content for a different card.
  </p>

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  <p>
    Lorem ipsum dolor sit amet...
  </p>
</div>

htmlcss

Answer №1

Utilize the properties flex-basis and max-width for styling .cardsForhhiae p

To achieve this,

If we set max-width:33% and flex-basis:33% for 3 columns per row, taking into account margins and paddings:

margin:2% = 4% for both right and left margin

padding:20px = 40px for both right and left padding

  max-width:calc(33% - (4% + 40px));
  flex-basis:calc(33% - (4% + 40px));

About the flex-basis property:

The flex-basis CSS property determines the initial main size of a flex item, setting the content box's size unless otherwise specified with box-sizing.

About the max-width property:

The max-width CSS property defines the maximum width of an element, preventing the width value from exceeding the specified max-width.

About Calc() function:

The calc() CSS function allows calculations in specifying property values, accepting various types like lengths, percentages, numbers, etc.

See It In Action

.cardsForhhiae {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  border-radius: 10px;
}

.cardsForhhiae p {
  font-family: 'Roboto', sans-serif;
  background-color: #68b0ab;
  padding: 20px;
  font-size: 20px;
  color: #000;
  margin: 2%;
  border-radius: 10px;
  max-width:calc(33% - (4% + 40px));
  flex-basis:calc(33% - (4% + 40px));
  box-shadow: 0 0 7px 0px;
}
<div class="cardsForhhiae">

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  <p>
    Vivamus turpis ante, condimentum eget sapien ut...
  </p>

  <p>
    Quisque rutrum aliquam dolor, et vulputate mauris auctor nec...
  </p>

  ...
</div>

Responsive Flex Layout

Desktop View (3 Items Per Row)

https://i.sstatic.net/NpN4K.png

iPad View (2 Items Per Row)

https://i.sstatic.net/byD1r.png

iPhone View (1 Item Per Row)

https://i.sstatic.net/t18Hn.png 

.cardsForhhiae {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  border-radius: 10px;
}

.cardsForhhiae p {
  font-family: 'Roboto', sans-serif;
  background-color: #68b0ab;
  padding: 20px;
  font-size: 20px;
  color: #000;
  margin: 2%;
  border-radius: 10px;
  max-width:calc(33% - (4% + 40px));
  flex-basis:calc(33% - (4% + 40px));
  box-shadow: 0 0 7px 0px;
}

@media only screen and (max-width:980px){
  .cardsForhhiae p {
    max-width:calc(50% - (4% + 40px));
    flex-basis:calc(50% - (4% + 40px));
  }
}

@media only screen and (max-width:640px){
  .cardsForhhiae p {
    max-width:calc(100% - (4% + 40px));
    flex-basis:calc(100% - (4% + 40px));
  }
}
<div class="cardsForhhiae">

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  ...
</div>

Answer №2

If you have the choice, consider utilizing the grid layout.

.cardsForhhiae {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
  border-radius: 10px;
}

.cardsForhhiae p {
  font-family: 'Roboto', sans-serif;
  background-color: #68b0ab;
  padding: 20px;
  font-size: 20px;
  color: #000;
  margin: 2%;
  border-radius: 10px;
  box-shadow: 0 0 7px 0px;
}
<div class="cardsForhhiae">

  <p>
    In ultrices pulvinar enim, et faucibus ante bibendum sit amet. Maecenas venenatis mauris sed erat porta imperdiet ut congue eros. Duis porta nec enim eget venenatis. Morbi vestibulum tellus in ornare hendrerit. Phasellus eu turpis sit amet nulla iaculis
    efficitur. In nisl nibh, sagittis sed enim eget, finibus malesuada purus. Maecenas gravida tempor condimentum.
  </p>

  <p>
    Vivamus turpis ante, condimentum eget sapien ut, maximus efficitur massa. Aenean eu scelerisque velit, a facilisis lectus. Quisque porttitor accumsan arcu in ullamcorper. In quis elit est. Maecenas blandit dui eget nulla eleifend lacinia. Mauris blandit,
    leo id venenatis iaculis, dolor turpis tincidunt ligula, a imperdiet nulla elit et eros. Donec tristique tincidunt risus et finibus. Maecenas laoreet quis enim ut porta.

  </p>

  <p>
    Quisque rutrum aliquam dolor, et vulputate mauris auctor nec. Duis molestie massa sed est efficitur, eget bibendum nisi mollis. Nunc sit amet diam vel nibh malesuada rutrum. Vestibulum libero odio, commodo ac justo vitae, vulputate sodales diam. Donec
    ornare tellus sed tortor finibus ultrices. Mauris sit amet convallis lorem. In venenatis, ante ut dapibus convallis, mauris arcu euismod nunc, quis bibendum tellus tortor vitae nunc.
  </p>

  <p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Etiam ullamcorper augue ac dui ullamcorper dapibus. Nulla laoreet nulla nibh. Sed ex mauris, porta eu sapien ut, maximus efficitur neque.
    Donec sit amet accumsan erat, venenatis porta libero. Integer aliquam rutrum ligula, nec sagittis arcu euismod eu. Praesent aliquam dictum turpis a rhoncus. Ut cursus, elit vitae scelerisque cursus, lorem urna scelerisque nibh, at venenatis tortor
    enim non lectus. Quisque suscipit quis enim ac hendrerit. Integer ultrices maximus nunc, et porta magna mattis ultricies. Integer non vestibulum leo.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mattis nulla, et bibendum mauris. Donec interdum nibh ante. Nullam viverra tellus vitae scelerisque semper. Donec luctus mi nibh. Nunc convallis velit et ante molestie aliquam. Proin
    varius volutpat sem, ut blandit justo tincidunt ac. Vestibulum iaculis, nisl eu sollicitudin tincidunt, eros diam laoreet arcu, vel laoreet lectus lacus vel est. Nullam auctor convallis enim id dictum. Vestibulum vestibulum mi id justo interdum dignissim.
    Mauris pharetra imperdiet lectus. Maecenas posuere hendrerit fringilla. Nunc sed augue urna. Phasellus et metus nulla. Phasellus sed sollicitudin lacus.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mattis nulla, et bibendum mauris. Donec interdum nibh ante. Nullam viverra tellus vitae scelerisque semper. Donec luctus mi nibh. Nunc convallis velit et ante molestie aliquam. Proin
    varius volutpat sem, ut blandit justo tincidunt ac. Vestibulum iaculis, nisl eu sollicitudin tincidunt, eros diam laoreet arcu, vel laoreet lectus lacus vel est. Nullam auctor convallis enim id dictum. Vestibulum vestibulum mi id justo interdum dignissim.
    Mauris pharetra imperdiet lectus. Maecenas posuere hendrerit fringilla. Nunc sed augue urna. Phasellus et metus nulla. Phasellus sed sollicitudin lacus.
  </p>
</div>

Answer №3

.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}

.qtop,
.qbottom{
    width: 96%;
    height: 46vh;
}

.card{
    display: flex;
    align-items: center;
    justify-content: space-around;
    float: left;
    width: 25%;
    height: 96%;
    border-radius: 30px;
    margin: 2%;
    padding: 2%;
    overflow: hidden;
}

.quodrant1{
    background-color: #948be5;
}

.quodrant2{
    background-color: #22e235;
}

.quodrant3{
    background-color: #086e75;
}

.quodrant4{ 
    background-color: #7cf5f9;
}

.quodrant5{ 
    background-color: #8768ae;
}

.quodrant6{ 
    background-color: #be3782;
}
<div class='quodrant'>
    <div class='qtop'>
        <div class='card quodrant1'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum purus ac tellus eleifend convallis. Integer vitae consequat lorem. Duis tristique mi at justo venenatis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
        <div class='card quodrant2'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum purus ac tellus eleifend convallis. Integer vitae consequat lorem. Duis tristique mi at justo venenatis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
        <div class='card quodrant3'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum purus ac tellus eleifend convallis. Integer vitae consequat lorem. Duis tristique mi at justo venenatis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
    </div>
    <div class='qbottom'>
        <div class='card quodrant4'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum purus ac tellus eleifend convallis. Integer vitae consequat lorem. Duis tristique mi at justo venenatis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
        <div class='card quodrant5'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum purus ac tellus eleifend convallis. Integer vitae consequat lorem. Duis tristique mi at justo venenatis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
        <div class='card quodrant6'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum purus ac tellus eleifend convallis. Integer vitae consequat lorem. Duis tristique mi at justo venenatis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The val() function in jQuery returns an empty string when used with a bootstrap popover input field

I'm facing an issue with my bootstrap popup form that includes input fields and a submit button. The problem arises when I try to capture the current value of the input fields using jQuery's val() method after clicking the submit button - it retu ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to break down a BeautifulSoup Tag replica found in the original HTML code?

I am facing a challenge with removing an element from the source BeautifulSoup object using my element extractor. For example: def extract_element(soup: bs4.BeautifulSoup) -> bs4.Tag: tag = soup.select('my-css-selector-or-something-else' ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

Tips for creating a consistently positioned div element, regardless of the screen size

Having trouble positioning two bars with green or blue filling in the bottom right corner? They keep moving around and not staying in place regardless of screen size. Check out how they are off-screen here Below is the CSS-Styling + HTML code: .eleme ...

htmlcss

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

I've implemented an AJAX script to handle the submission of a basic contact form with Google reCAPTCHA at the end of my HTML. Here's the relevant HTML code: <div class="col-md-6"> <form role="form" id="form" action="form.php" method ...

javascriptphpjqueryhtmlforms

Attempting to transmit a pair of parameters from an HTML form through Flask (within a URL) in order to subsequently execute in a Python script

As a newcomer, I am working on a Python algorithm that requires two parameters obtained from an HTML form. Here is the snippet of my HTML code: <form action="result/"> <p><input class="w3-input w3-padding-16" method ...

pythonhtmlflaskget

What could be causing my Angular.js application to malfunction on IE7?

I have developed an Angular.js application that is working well on most browsers, but I am now facing compatibility issues with IE 7 and above. I have tried different approaches such as adding id="ng-app", using xmlns:ng, manually bootstrapping angular wi ...

javascripthtmlangularjsinternet-explorer-7

Guide to counting the number of image tags within a parent div and selectively removing them starting from a specific position

My dynamic image tag <img> is generated inside a div from the database using fetching. Here is how my HTML looks: <div class='forimgbox'> <p class='palheading'>Pals</p> <img src='userpic/2232323.p ...

javascriptjqueryhtmlcss

numbered navigation jquery plugin

Can anyone recommend a jQuery plugin or alternative solution for creating a navigation system for comments similar to YouTube? Here is the link for reference: Thank you in advance. ...

javascriptjqueryhtmlcss

What could be the reason that the painting application is not functioning properly on mobile devices?

I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...

javascripthtmlcss

What are the common reasons for code malfunctions on JSFiddle?

I have compiled some code at https://codepen.io/fjenpen/pen/pROPov but for some reason, when I check it out on https://jsfiddle.net/z05d3ufq/, the #flexiselDemo3 element is breaking? $('#flexiselDemo3 a').click(function(e) { var target = $(this) ...

jqueryhtmlcss

Unable to apply color changes with jQuery

As I delve into learning jQuery, I encountered an issue while attempting to change the color of a tr element. Strangely, I was successful in updating other CSS attributes like font-style. According to my understanding so far, we use the following syntax to ...

jqueryhtmlcss

Obtaining the width of an object in Three.js using CSSObject3D

In my process, I am dynamically generating HTML Dom Elements from HTML text using a specific function: String.prototype.toDomElement = function () { var wrapper = document.createElement('div'); wrapper.className = "toDomWrapper"; wrapper.i ...

javascripthtmlthree.js

Increase or decrease a variable by 1 using jQuery

There are simple plus and minus buttons on each side of an input field, as shown in the code below: <input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%" onclick="subst()" />  <input type="text" ...

javascriptphpjqueryhtml

Changing the placement of navbar components in Bootstrap 4 based on screen size

Through the use of Bootstrap 4, I have successfully created a navbar that collapses into a button when the screen size decreases. However, I am facing an issue where one item (the icon image) gets centered while the rest of the items are aligned to the lef ...

htmlcssbootstrap-4

Matching the heights of child elements in different block elements using CSS (flex/grid)

Hey there! I need some help with a markup issue. I want to replicate the layout shown in this picture. The challenge is ensuring that the grey line between the upper and lower sections of cards on the same row are aligned perfectly. In the image, you can s ...

htmlcssflexboxcss-grid

Discover the magic of gradients in tooltips with Bootstrap 5!

I recently encountered some challenges when attempting to apply a gradient color to bootstrap 5 tooltips CSS: .tooltip .tooltip-arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .bs-toolt ...

htmlcsssasstooltipbootstrap-5

JavaScript code to automatically pause/play HTML5 videos when scrolling

I'm working on creating a video gallery using HTML5 and JS. I've managed to set it up so that you can scroll horizontally between autoplaying muted HTML5 videos, and the videos play or pause when scrolled into or out of view. Everything is functi ...

javascripthtmljquery

After toggling the class, Jquery will no longer select the button

I am having an issue with my jQuery code where I have a button that, when clicked, should switch classes from #testButton to .first or .second. The image toggle shows that the first click works fine and toggles the image, but the second click does not seem ...

javascriptjqueryhtml

Navigate to the table cell located directly underneath a specified cell within an HTML table

Below is a table for reference: ------------------------------------------ | category 1 |category 2| category 3 | |------|---------|--------|---------------- |item1 |item2 | item3 | item4 | |--|---|--|------|---|----|------|----- ...

jqueryhtml

Two CSS borders of varying heights

Just wondering, can we achieve something similar to the style shown in the attachment using only CSS? <h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3> ...

htmlcss