What is the solution to prevent a CSS flex column from expanding to fill the width in a row with three

I am trying to create a flex row with three columns, but when I only have two columns in the row, the second column gets pushed to the right side. You can see this issue in the image below.

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

In the image, the red lines indicate how I want all columns to be positioned.

The CSS for the row is as follows:

display: flex;
justify-content: space-between;
flex-flow: row wrap;

And the CSS for the columns is:

display: flex;
flex-direction: column;

Additionally, Bootstrap 4 is being used, with the row having the "row" class and the columns using "col" classes.

Is there a way to keep two columns in a row positioned correctly, similar to how they would be with three columns?

htmlcssbootstrap-4

Answer №1

If you want to utilize flexbox for this task, consider using justify-content: flex-start;. To achieve 3 columns per row, assign flex-basis: ~30%; to the flex items. Here is an example implementation:

 .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.block {
  background-color: grey;
  flex-basis: 30%;
  margin: 5px;
}

JSfiddle

I hope this solution proves helpful!

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

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

cssreactjsmaterial-ui

I am encountering an issue with the Link tag from next/link that is throwing an error. The error message states: "React.Children.only expected to receive a single React element

Hey everyone, I've come across an issue with using next/link in my code. Every time I replace the anchor tag with the "Link" tag, I encounter an error. I've searched for a solution but haven't found one yet. Any help would be greatly appreci ...

cssreactjsnext.js

Incorporating unique HTML5/iframe widgets into your Facebook Timeline and Tab Pages

I have a unique widget that users can easily integrate into their websites using the HTML/iframe code generated by my app. Now, I am looking for a way to allow users to also add this widget to their Facebook Company Pages. The widgets are accessible th ...

javascripthtmlfacebookwidget

Tips for utilizing comment tags efficiently

I have encountered an issue with IE7 where my CSS is not functioning properly. In an attempt to target IE7 and lower versions specifically, I inserted IE comment tags into the HTML code. However, despite my efforts, it does not seem to be effective. Initia ...

htmlcssinternet-explorer

How can I turn off automatic ellipsis on my IOS device?

Currently, I am working on a web application that involves displaying location descriptions retrieved from an API. The issue I am encountering is that the description is being cut off with an ellipsis after a certain number of lines when viewed on an iPhon ...

htmlcssiostypescriptionic-framework

Text box is not automatically filling up when selecting from dropdown menu

I am currently facing an issue with a dropdown box that offers three different selections. I want the Group ID associated with the selected group to automatically populate in the textbox below. How can I achieve this functionality? Whenever I make a selec ...

javascriptphphtmlsql-serverdrop-down-menu

Ways to confine the tabindex within a specific div container

I am currently working on identifying examples of bad accessibility practices. Specifically, I am focusing on issues related to Keyboard Focus. The first example I have encountered is the lack of visibility when trying to navigate through a set of buttons. ...

javascriptjqueryhtmlcssweb

Swapping out ChildNode data for HTML elements

When attempting to replace a node value with HTML content, I encountered an issue where the HTML tags were being displayed on the HTML page instead of applying the intended style. <style> .YellowSelection { background: yellow; } < ...

javascriptjqueryhtml

Is there a way to alter visibility once a radio button has been selected?

I have a shape resembling a cube with 4 faces, all of which are currently visible. However, I would like to hide the other 3 faces when one face is showing. For example: I attempted setting the opacity of the other cube sides to 0 when the first radio but ...

javascripthtmlcss

Vertical alignment with flexbox not functioning properly in Internet Explorer 11

I am attempting to use flex to center an icon within two divs. Below is the code snippet: .div-1 { width: 50px; height: 50px; display: flex; border-radius: 50%; background-color: #228B22; } .div-2 { margin: auto; } i { color: #ffffff; } &l ...

htmlcssinternet-explorerinternet-explorer-11

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...

javascripthtmlcss

Incorporate a lesson featuring jQuery into your curriculum

Just starting out with jQuery and I have a form setup like this: <select name= "menus"> <option value="">--Select--</option> <option value="a">a</option> <option value="b">b</option> <option val ...

jqueryhtml

ReactJS Navbar component experiencing CSS hover bug

While developing a navbar component in React, I encountered an unexpected issue - the hover effect on my navigation links suddenly stopped working. Strangely enough, the cursor: pointer functionality still operates on my logo but not on the nav links durin ...

htmlcssreactjsweb-deploymentreact-component

Zurb Foundation gem causing navigation errors

Typically, I rely on the Twitter Bootstrap Rails gem for my projects, but this time I decided to try out the Zurb Foundation gem. Following the installation instructions meticulously, I added the navigation code: <div class="row"> <div class="th ...

htmlruby-on-rails-3sasszurb-foundation

In this guide, learn the best way to dynamically adjust image height to match the height of any device

I am trying to make sure that the image on the front page of my website fits the height of the screen or device, and resizes responsively without cropping when the device height changes. How can I achieve this? If you need a visual example of what I mean, ...

cssmobileresponsive-designcross-browser

Tips for achieving a full div image on hover

I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div? Here's the updated CSS code: img { display ...

htmlcss

Resolved the z-index problem with the header and sidebar placement

Hello there! I have come across an issue that I need some help with. I have a fixed sidebar and header on my website, both of which have drop shadows applied to them. However, I don't want the header to cast a shadow on the sidebar as I want them to ...

htmlcssz-indexfixed

What is the Best Way to Toggle the Visibility of Specific Buttons in a Table Using Jquery?

<html> <head> <script> $( "#clickMeButton" ).click(function() { $(this).next("#hiddenButton").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr& ...

javascriptjqueryhtml

How do I position an input box at the bottom of a split window using CSS?

I am grappling with maintaining the alignment of an input box underneath a chat window while using the float:left property. As there will be multiple chat windows and I want them to remain next to each other, I am uncertain about how to achieve this. Chec ...

css

Triggering div visibility based on jQuery select change event

I am currently working on a form feature that involves showing a div when a specific option in a select element is chosen, and hiding the div when the option is not selected. Here is the current structure of my markup: Here is the current HTML markup I ha ...

jqueryhtmlhideshow