Develop a flexbox containing three items, all with the same width

I'm struggling to create a flexbox layout with 3 items of equal width. The issue arises when I try to add padding or gap, causing it to break into only 2 columns! Grid is not an option - it has to be flex!

Here is the HTML and CSS:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.color {
    background-color: limegreen;
}
.spacing {
    padding: 1em;
}
.flex-item {
    flex: calc(100% / 3);
}
<div class="flex-container">
    <div class="flex-item color spacing">1</div>
    <div class="flex-item color spacing">2</div>
    <div class="flex-item color spacing">2</div>
    <div class="flex-item color spacing">4</div>
    <div class="flex-item color spacing">5</div>
    <div class="flex-item color spacing">6</div>
    <div class="flex-item color spacing">7</div>
    <div class="flex-item color spacing">8</div>
</div>

htmlcss

Answer №1

To implement this, simply insert the following code snippet into your stylesheet under .flex-item:

flex: calc((100% - 2rem) / 3);
box-sizing: border-box; 
</pre>

The subtraction of 2rem accounts for the spacing between the first and second elements, as well as the second and third elements.


Your complete CSS should look like this:






.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.color {
    background-color: limegreen;
}
.spacing {
    padding: 1em;
}
.flex-item {
  flex: calc((100% - 2rem) / 3);
  box-sizing: border-box; 
}


<div class="flex-container">
    <div class="flex-item color spacing">1</div>
    <div class="flex-item color spacing">2</div>
    <div class="flex-item color spacing">2</div>
    <div class="flex-item color spacing">4</div>
    <div class="flex-item color spacing">5</div>
    <div class="flex-item color spacing">6</div>
    <div class="flex-item color spacing">7</div>
    <div class="flex-item color spacing">8</div>
</div>






If you want the last two divs to occupy only the first and second columns, use width instead of flex in the .flex-item class:


.flex-item {
  width: calc((100% - 2rem) / 3);
  box-sizing: border-box; 
}


Your revised CSS would now be:






.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.color {
    background-color: limegreen;
}
.spacing {
    padding: 1em;
}
.flex-item {
  width: calc((100% - 2rem) / 3);
  box-sizing: border-box; 
}


<div class="flex-container">
    <div class="flex-item color spacing">1</div>
    <div class="flex-item color spacing">2</div>
    <div class="flex-item color spacing">2</div>
    <div class="flex-item color spacing">4</div>
    <div class="flex-item color spacing">5</div>
    <div class="flex-item color spacing">6</div>
    <div class="flex-item color spacing">7</div>
    <div class="flex-item color spacing">8</div>
</div>

Answer №2

There are two essential steps you must take:

  1. Adjust the box-sizing property of the flex-item to account for paddings by adding: box-sizing: border-box
  2. Factor in the gap in your calculations. I suggest using a CSS variable for the gap: 
    calc((100% - (2 * var(--gap))) / 3)

:root { 
  --gap: 1rem;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.color {
  background-color: limegreen;
}

.spacing {
  padding: 1em;
}

.flex-item {
  box-sizing: border-box;
  flex: calc((100% - (2 * var(--gap))) / 3);
}

.span-2 {
  flex: calc(((100% - (2 * var(--gap))) / 3) * 2 + var(--gap));
}
<div class="flex-container">
  <div class="flex-item color spacing">1</div>
  <div class="flex-item color spacing span-2">2</div>
  <div class="flex-item color spacing">2</div>
  <div class="flex-item color spacing">4</div>
  <div class="flex-item color spacing">5</div>
  <div class="flex-item color spacing">6</div>
  <div class="flex-item color spacing">7</div>
  <div class="flex-item color spacing">8</div>
</div>

Answer №3

Adjust the padding/margin inside an element nested within the .flex-item

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.color {
  background-color: limegreen;
}

.spacing {
  margin: 1em;
}

.flex-item {
  flex: calc(100% / 3);
}
<div class="flex-container">
  <div class="flex-item"><div class="color spacing">1</div></div>
  <div class="flex-item"><div class="color spacing">2</div></div>
  <div class="flex-item"><div class="color spacing">2</div></div>
  <div class="flex-item"><div class="color spacing">4</div></div>
  <div class="flex-item"><div class="color spacing">5</div></div>
  <div class="flex-item"><div class="color spacing">6</div></div>
  <div class="flex-item"><div class="color spacing">7</div></div>
  <div class="flex-item"><div class="color spacing">8</div></div>
</div>

Answer №4

To prevent padding from increasing the total width, include the following css rule:

.flex-container {
  box-sizing: border-box;
}

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

Customizing meter-bar for Mozilla and Safari

I've implemented the following CSS on my meter bars but for some reason, the styling isn't showing up correctly in Safari (refer to the screenshots below). I'm relatively new to CSS and simply copied the code provided. Based on the comments, ...

htmlcsssafarimozillameter

Adjusting font size according to the font style selected

Can conditional font size be determined based on font family using CSS or jQuery? ...

jqueryhtmlcssconditional-statementsfont-size

Toggle visibility of several list item contents using the same identifier

I have a multitude of list elements (li) that I would like to toggle between hiding and showing when a filter button is clicked. Located at the top of the page are buttons designed as follows: <span id="filter"> <a ...

javascriptjqueryhtml

Incorporating Card Layouts with SwiperJS

Reference Code: See Example on Code Sandbox I am looking to implement a swiper that allows for navigating one slide at a time with a layout where slidesPerView: "auto" and fixed width are used. The first two slides behave as expected, but the la ...

javascripthtmlcssswiper.js

The animation feature does not work on all elements individually

I am encountering an issue with my progress bar where the data-percent attribute is not being applied correctly. Each pro-bar has a different data-percent value, but in the browser, the first pro-bar's data-percent value is being applied to all of the ...

javascriptjqueryhtmlcss

Choosing the relevant kendo row on two different pages

I am facing a situation where I have a Kendo grid displayed on a dashboard page. Whenever a user selects a row in this grid, I need to load the same row in another Kendo grid on a separate ticket page to showcase the details of that particular ticket. The ...

javascripthtmljquerykendo-uikendo-grid

jQuery regex failing to display latest changes

I am running into some issues with my custom jQuery snippet that is supposed to dynamically display the results. Each H2 tag contains an image, and I want to ensure the image is positioned correctly next to the word "test." Here is the script in question: ...

htmljqueryregex

If Bootstrap CSS is linked, custom CSS style rules will only take effect when added within a style tag

I’m currently facing an issue where my custom CSS rules are not being applied after linking Bootstrap in my project. I am using Bootstrap CSS for a custom layout and need to incorporate my own styling as well. When I link bootstrap.min.css followed by m ...

cssbootstrap-4

Is Javascript automatically generated by asp.net?

If I were to initialize a fresh VS project and paste the subsequent sample code into a freshly created page default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %> <!DOCTYPE ...

javascripthtmlasp.net

Display and conceal DIV Class from separate webpage document

I currently have two PHP files: index.php show.php - index.php <ul> <li><a href="show.php?id=1">Show Div 1</a></li> <li><a href="show.php?id=2">Show Div 2</a></li> <li><a href="show ...

phpjavascriptjquerycssajax

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

I'm having trouble with this. It seems like a small issue, but I'm still very new to learning about rails. Any help you can provide would be greatly appreciated! Solution: To resolve the problem, I accessed the file responsible for adding head ...

ruby-on-railscss

What is the best way to assign the order position in CSS?

I recently attempted to incorporate a CSS animated background into my project. Here is how it currently looks: The particle effect hovers above the menu list (which currently just says "test"). The CSS code for my particles is as follows: .circles { pos ...

cssreactjs

Is there a way I can create a slight gap between the icon and the text in this area?

After learning Reactjs and JavaScript, I have encountered a problem that I need advice on. In the image provided, the "Sign in" text does not have proper spacing between the icon and the text, unlike the other menu items. https://i.stack.imgur.com/b663b. ...

htmlreactjs

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file

Currently, I am in the process of developing a library for analyzing webpages. My approach involves using Selenium to access elements on a webpage through xpath. I have been contemplating replacing Selenium with an offline xpath tool. However, upon furthe ...

javascripthtmldomseleniumxpath

Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the active state? <v-list> <v-list-item-group v-model="day" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-content& ...

cssvue.jsvuejs2vuetify.js

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

The challenge of transferring documents to the server

There is a form on the webpage where users can select a file and click a button to send it. <form enctype="multipart/form-data"> <input type="file" id="fileInput" /> <button type="button&quo ...

javascripthtmlnode.jsexpress

The function element.checked = true/false in Vanilla Javascript seems to be malfunctioning

Here is the HTML code I am working with: <ul class="nav md-pills pills-default flex-column" role="tablist"> <li class="nav-item"> <input type="radio" name="q01" value="1" hidden checked> <a class="nav-link choice01 ...

javascripthtmlradio-buttonchecked

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

What steps should I follow to build a single page application with a navigation bar?

For my latest project, I am working on a single page application that features a dynamic navbar. The purpose of this application is for a music review site where genres like 'Pop', 'HipHop' and 'Jazz' will be showcased in the ...

javascripthtmlcss