Ensure that each column within a flexbox list is set to a flex-direction of column and flex-wrap of wrap, with a width no wider than

Question

Ensure that each column within a flexbox list is set to a flex-direction of column and flex-wrap of wrap, with a width no wider than

This code snippet is almost functioning correctly, but there seems to be an issue with it taking up the entire width available:

https://jsfiddle.net/d16ba2re/2/

CSS:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  padding: 0;
  margin: 0
}

li {
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0
}

The justify-content property doesn't seem to have any effect, regardless of how I adjust it.

Is there a simple solution to achieve the desired outcome here, or am I at a dead end?

css flexbox

Answer 1

Answer №1

It seems like you are interested in using the align-content property with a specific value, such as flex-start:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100px;
  padding: 0;
  margin: 0
}

li {
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
  <li>Fifteen</li>
  <li>Sixteen</li>
  <li>Seventeen</li>
  <li>Eighteen</li>
  <li>Nineteen</li>
  <li>Twenty</li>
  <li>Twenty one</li>
  <li>Twenty two</li>
  <li>Twenty three</li>
</ul>

Answer 2

It seems like you are interested in using the align-content property with a specific value, such as flex-start:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100px;
  padding: 0;
  margin: 0
}

li {
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
  <li>Fifteen</li>
  <li>Sixteen</li>
  <li>Seventeen</li>
  <li>Eighteen</li>
  <li>Nineteen</li>
  <li>Twenty</li>
  <li>Twenty one</li>
  <li>Twenty two</li>
  <li>Twenty three</li>
</ul>

Answer 3

Answer №2

If I decide to ask another question instead, but if this happens to be an easy query for you... I am facing challenges when using float:right to wrap . The expectation is for the div to fully contain the ul, however it actually overflows. Here is a link to a demo: jsfiddle.net/d16ba2re/3

Try setting a specific width for your div. I tested with 295px and it appears to work fine.

Answer 4

If I decide to ask another question instead, but if this happens to be an easy query for you... I am facing challenges when using float:right to wrap . The expectation is for the div to fully contain the ul, however it actually overflows. Here is a link to a demo: jsfiddle.net/d16ba2re/3

Try setting a specific width for your div. I tested with 295px and it appears to work fine.

Ensure that each column within a flexbox list is set to a flex-direction of column and flex-wrap of wrap, with a width no wider than

Answer №1

Answer №2

Similar questions

deleting the digits following the decimal point

Is there a peculiar issue with CSS float:right in IE9?

Styling columns to be inline-flex without taking up the full height

Error message: "Maximum width header anomaly"

Unclear when notifying div content

Incorporate a pseudo class to a unique custom template or directive within an Angular project

CSS Adaptation of Hover Interaction

Attempting to establish a means to switch between languages

What is the best way to calculate precise pixel dimensions for mobile devices?

Transforming external JavaScript and CSS scripts into HTML code

Experiencing difficulties in applying an image texture to a plane using Three.js CanvasRenderer

Accordion transition effect designed by yours truly

The CSS styles are not applied when using self.render("example.html") in Tornado/Python

What is the best way to incorporate an image or custom shape into a divider?

Is there a way to uncover the original source of a background image data?

Creating a sleek Bootstrap inline form featuring two input fields with minimal spacing between them

The image on the card is barely visible due to the applied Bootstrap 4 styles

Having difficulty reaching elements within a shadow frame using Selenium in Java

How can I optimize webkit-mask-box-image with a high-resolution Retina image?

The Bootstrap Navbar is occupying an excessive amount of room on compact screens