Align the last line of flex cells to the left side

I have created a flex structure that resembles a table and adjusts the number of cells based on the content. However, when the last row is not full, the remaining cells stretch to fill the empty space, which affects the overall appearance of the structure. https://i.stack.imgur.com/s0Psp.jpg

Link to see the issue in JSFiddle (please enlarge results area)

Despite using justify-content: flex-start;, the problem persists.

Is there a way to move the remaining cells back to their original positions?

cssflexbox

Answer №1

To resolve this issue, simply remove the flex: 1 1 0px CSS style from your code. Replace the following code with your current code:

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

ul.text li { 
  min-width: 300px; 
  display: inline-flex; 
}

Answer №2

Update your CSS as shown below!

ul.text {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
ul.text li {
  min-width: 300px;
  display: inline-flex;
  flex: 1 1 0px;
  justify-content: center;
  align-items: center;
  resize: both;
}

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

Creating a fixed footer within a div that is absolutely positioned using CSS

I am looking to implement a sticky footer within an absolutely positioned div element. My initial approach was to position the footer div absolutely as well - within an additional relatively positioned "page" div (which would contain the main content of t ...

htmlcss

CSS properties are ineffective in scaling the image strip

I have a large image strip measuring 130560 x 1080. My goal is to load it into an image tag and use the parent div as a viewport, showing only one section of the image at a time. However, I'm encountering a problem when specifying the height and widt ...

htmlcssimage

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

When using Safari on my iPad, I noticed that the white X appears on the right-hand side of the black screen. Since this is the only version of Safari that I have, I am unsure if this issue is specific to iPads, Safaris, or just my device. Visit this link ...

htmlcssiosipadsafari

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

I stumbled upon something similar in the documentation for bootstrap-vue: A card with tabs: Now, how can I style the tabs to look like this: This is my current code: <b-card no-body> <b-tabs card> <b-tab title="Tab 1" active& ...

javascriptcssvue.jsvuejs2bootstrap-vue

Prevent background image animation in CSS

I've encountered an issue with a simple button I created that uses two background images for normal and hover states. Upon testing in various browsers, I noticed that the images animate on hover, causing them to slide up and down. I tried eliminating ...

csscss-transitions

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

jqueryhtmlcssangularjstwitter-bootstrap-3

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

I tried implementing some basic CSS from to create a sticky footer that remains at the bottom of the page regardless of content length. However, I am encountering a problem with the footer not behaving as expected. There are actually two issues with the f ...

cssfootersticky-footer

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

javascripthtmlcss

Mapping with Star Components

As a newcomer to ReactJs, my task is to create a 5-star review component with the ability to display half-star ratings. I previously implemented this in Angular5. Within the map method, I need to loop through the following elements: <!-- full star -- ...

cssreactjs

CSS reinitialization for the HTML5 button element

Is there a way to reset the HTML5 button tag so that it behaves consistently across all browsers? Currently experiencing issues with IE9 going haywire when trying to style the button tag. I am aware of using display:block; but what other solutions exist.. ...

csshtml

"Utilizing React.js to implement white-space styling on numeric values for

I am a beginner in Reactjs and eager to learn and improve. Here is some code I have been working on: there's an <h1> element with the text "test", and beneath it, I want to display numbers vertically like this: 1:1, 1:2, 1:3. However, the CSS do ...

javascripthtmlcssreactjsjsx

Combining Three.js with iFrame for a mix of WebGL and CSS3D

After some experimentation, I successfully created a dynamic page that seamlessly integrates WebGL and CSS3D (with valuable guidance from this helpful SO post). To add an extra touch, I included an iframe: However, I noticed that the functionality to inte ...

javascripthtmlcssthree.js

The performance of my Wordpress site is being hindered by the slowdown caused by Admin

I have a Wordpress website focused on winter sports vacations in Iceland: link Every plugin, WordPress core, and theme are up to date. Using Woocommerce for my online store. However, activating the Woocommerce plugin causes the site to slow down signific ...

cssajaxwordpressadmin-ajax

using node-sass with several different starting points

I am currently working on a project where my main entry point is structure.scss, and each platform has its own second entry point. Here is the folder structure: scss/ | |-- components/ # Modular Component Files | |-- login.scss ...

cssnpmsassscss-lintnpm-scripts

Sometimes the Navbar options fail to show up consistently on the Navbar bar

I recently launched my website at campusconnect.cc Unfortunately, I've noticed that when resizing the window, the navbar options are shifting up and down. Can anyone help me identify the issue and provide guidance on how to resolve it? ...

javascripthtmlcsstwitter-bootstrap

Middle align an absolutely positioned block within a table cell vertically

Here is the code I am working with: td { border: 1px solid #cecece; position: relative; padding: 80px 20px; } .hint { background: yellow; position: absolute; top: 0; bottom: 0; left: 100px; } <table style="width:800px"> <tr> ...

htmlcss

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

javascriptjqueryhtmlcss

Why isn't margin working with position: fixed?

I need help finding a solution for incorporating margin in a box within my App class. The issue is that the position fixed property doesn't seem to work as intended. <div className="App"> <div className="box"> ...

htmlcss

Creating a CSS path that incorporates two conditions simultaneously

I'm currently facing a challenge with finding the CSS path in this scenario: There are over 20 child nodes, and I need to identify every node that has fill attribute not equal to none. I understand that I can target a specific node using :nth-child( ...

htmlcssnode.js