Limit 4 items per row in a flexbox layout with automatic width

https://i.sstatic.net/UaD6R.png I am currently using tables to display my items, but I want to switch to flexbox. However, when I tried using flexbox, the item widths were not dependent on their content. Any suggestions on how I can achieve this? Thank you in advance.

Here is a snippet of the code I have been using:

.flexContainer {
display: flex;
flex-flow: row wrap;
}
.flexContainer .item {
padding: 5px;
flex: 1 1 auto;
}
.flexContainer .item a {
display: block;
background: blue;
text-align: center;
}
<div class="flexContainer">
<div class="item"><a href="">sdfsf</a></div>
<div class="item"><a href="">dffdfdf</a></div>
<div class="item"><a href="">fdfdfd</a></div>
... more items here ...
</div>
htmlcssflexbox

Answer №1

After reviewing this repository here, it appears that you can implement the following CSS in your code:

CSS:

* {
  box-sizing: border-box;
}

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

.flexContainer .item {
  padding: 5px;
  flex: 1 1 20%;
}

This will help achieve the intended layout.

* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}
.flexContainer .item {
    padding: 5px;
    flex: 1 1 20%;
}
.flexContainer .item a {
    display: block;
    background: blue;
    text-align: center;
}
<div class="flexContainer">
    <div class="item"><a href="">sdfsf</a></div>
    <div class="item"><a href="">dffdfdf</a></div>
    <div class="item"><a href="">fdfdfd</a></div>
    <div class="item"><a href="">fdfdgdf</a></div>
    <div class="item"><a href="">ffffffffff</a></div>
    <div class="item"><a href="">fdfdfdg</a></div>
    <div class="item"><a href="">dddddddddddddd</a></div>
    <div class="item"><a href="">fdfdfdsd</a></div>
    <div class="item"><a href="">dsds</a></div>
    <div class="item"><a href="">dffdfdfdsf</a></div>
    <div class="item"><a href="">dffdfdfsdsds</a></div>
    <div class="item"><a href="">dffdfdfssdsfd</a></div>
    <div class="item"><a href="">dfsddfdfdf</a></div>
    <div class="item"><a href="">dff</a></div>
    <div class="item"><a href="">dffdfdfdffdfdfdffdfdf</a></div>
</div>

UPDATE 14-JULY-2017 0829 UTC

To demonstrate limiting to 5 items per row using this method, while adjusting according to content width:


* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}
.flexContainer .item {
    padding: 5px;
    flex: 1 1 20%;
}
.flexContainer .item a {
    display: block;
    background: blue;
    text-align: center;
}
<div class="flexContainer">
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are quite a bit bigger</a></div>
    <div class="item"><a href="">we are quite a bit bigger</a></div>
    <div class="item"><a href="">we are quite a bit bigger</a></div>
    <div class="item"><a href="">we are the biggest divs yet</a></div>
    <div class="item"><a href="">we are the biggest divs yet</a></div>
    <div class="item"><a href="">I am the daddy of all the divs on this page.</a></div>
</div>

UPDATE 18-OCT-2019 1909 UTC

Following best practices, it is recommended to use slightly less than available capacity to account for gaps. Here is the updated code:

* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}
.flexContainer .item {
    padding: 5px;
    flex: 1 1 17%;
}
.flexContainer .item a {
    display: block;
    background: blue;
    text-align: center;
}
<div class="flexContainer">
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we're short</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are a bit bigger</a></div>
    <div class="item"><a href="">we are quite a bit bigger</a></div>
    <div class="item"><a href="">we are quite a bit bigger</a></div>
    <div class="item"><a href="">we are quite a bit bigger</a></div>
    <div class="item"><a href="">we are the biggest divs yet</a></div>
    <div class="item"><a href="">we are the biggest divs yet</a></div>
    <div class="item"><a href="">I am the daddy of all the divs on this page.</a></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

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

javascriptphpjqueryhtml

Glitch in jQuery causing multiple instances of text being added to a textarea consecut

I created a response system where users can reply to comments by clicking on the reply button. Once clicked, it triggers a function that adds @user at the beginning of their comment: $('#inputField').focus(); $('#inputField').text(&apo ...

jqueryhtmltextareaappend

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

I recently followed a tutorial on creating a Flickr Search App with AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4). I managed to show the search results on my page, but encountered an issue: I couldn't scroll all the way back up to the search ...

javascripthtmlcssangularjsflickr

Navigate to the previous or next page using JavaScript

I've been struggling to figure out how to navigate one page up and down using simple links, but I haven't found a solution that works for me. The URL I am working with is: . When the "next page" button is clicked, it should go to ?page=2, and whe ...

javascriptphpjqueryhtml

Issue with displaying MP4 movies in Angular

I'm trying to display an mp4 video in Angular 9: <video controls (click)="toggleVideo()" preload="none" *ngIf="post.moviePath != null" #videoPlayer> <source [src]="getMovieSanitazePath(post.moviePath ...

htmlangularvideomp4

How can I display an image next to an element when hovering over it?

Whenever I hover over a .tags element, I want to display the image next to it. Feel free to test this feature on this specific page. This is how I envision it should look when not hovering over any .tags cell (the cells in the final column all have the ...

htmlcss

Is there a way to determine what is affecting the properties of an element?

I've been grappling with a chunk of lengthy HTML, styles, and javascript. My mission? To uncover whatever magic is changing the text within a specific element. <span class="panel-title"> I'm a Panel with All Options</span> Transform ...

javascripthtmldebuggingbrowser

Personalized dropdown appearance

During my work on a select box, I discovered that custom styling is not possible. I attempted to use some plugins but did not find one that met my needs. I am seeking a dropdown menu with options in both black and gray, similar to this template but using ...

javascriptjqueryhtmlcss

Personalizing CSS for a large user base

My website allows users to choose themes, customize background, text, and more. I am seeking the best method to save all of these changes. Is it preferable to use a database read or a file read for this purpose? Any recommendations are greatly appreciate ...

csscustomization

How to style material-ui input with outlined variant using css

Currently, I am attempting to replicate the material-ui outlined input. The background color and input styles are different, so simply setting the label position to absolute and pushing it up is not working for me. Any suggestions on how to achieve this? ...

cssreact-nativematerial-ui

What is the best way to position an image alongside an h2 heading?

Perhaps the technology stack is not relevant in this case, but I am currently working on a nextjs project with tailwind for styling. I am attempting to place an image next to an h2 tag, but encountering unexpected behavior from the image. It seems as thoug ...

htmlcssnext.jstailwind-css

Having trouble with implementing a static URL in CSS

I'm struggling to incorporate a static file into my CSS as a background image for my website. The static URL is functioning properly when tested in HTML, but it's not working when implemented in CSS. HTML: {% extends 'base.html' %} { ...

cssdjango

Create a single CSS style rather than using multiple CSS styles

I currently have multiple CSS styles applied: form#reply_form-c1r1.odgovor div#cmtforms-c1r1 input{color:red} form#reply_form-c2r1.odgovor div#cmtforms-c2r1 input{color:red} form#reply_form-c3r1.odgovor div#cmtforms-c3r1 input{color:red} form#reply_form-c4 ...

csscss-selectors

Using CodeIgniter, input information into a textbox and verify if there is a corresponding record in the database when submitting

Working on a CodeIgniter project, I am faced with the task of adding information to a form within my view page called meal_add.php. Below is the form structure: <div id="content" class="box"> <form action="<?php echo base_url(); ?>index ...

phphtmlmysqlcodeigniter

Ways to navigate to a new webpage in JavaScript without the need to click on a link

After going through various posts and trying different methods, I am still facing challenges. In a PHP page, I have an HTML form with an onClick command that triggers a JavaScript validation procedure when the user clicks a button. While everything funct ...

javascriptphphtml

Why is the div element within the container not automatically occupying 12 columns, but rather only 1?

I'm struggling to comprehend the bootstrap grid system, as explained in Murach's .Net book. Please take the time to read through the entire post. I am aware of the solution (<div class="col-lg-12">Col x</div> works), but I am curious ...

htmlcss.netbootstrap-4

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

htmlcsstextareacss-grid

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascriptcssangularjsplumb

What is the best way to extract additional values linked to the query within the array?

I have successfully retrieved all subcategories of a category using the code below. However, I am now facing an issue where I also want to fetch other fields associated with each subcategory, such as the price if the subcategory is a Product like Smartphon ...

phphtmlmysqlarraysfor-loop

Interactive JavaScript Linkage

Recently, I came across some code that I inherited (definitely not mine!) which uses a session variable in the HTML header to link to a specific javascript file. For example: <SCRIPT language="javascript" src="../JavaScript/<%=Session("jsFileName") ...

javascriptasp.nethtmlvb.netvisual-studio-2003