Flex-Basis for Wrapping Columns

Flex items not wrapping in a column direction container

Apply total height on ul and make it wrap.

Then apply flex-basis on ul li (which is height because we've applied flex-direction: column) to 50%. Like:

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%; /* which in this case will be '50px' */
}

Have a look at the snippet below:

ul {  list-style: none;  margin: 0;  padding: 0;  display: flex;  flex-wrap: wrap;  flex-direction: column;  height: 100px;}ul li {  flex-basis: 50%;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li></ul>

Flex wrap and items with flex basis 100% causes extra space

Make the wrap-container flex-direction:column

.flex-container {
  display: flex;
}

.flex-container-wrap {
  display: flex;
  flex-direction: column;  
  border:1px solid rebeccapurple;
}

.flex-item-full-width {
  flex:1;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <div class="flex-container">
      <div class="flex-container-wrap">
        <div class="flex-item-full-width">Test item</div>
        <div class="flex-item-full-width">Test item Long Version</div>
        <div class="flex-item-full-width">Test item</div>
        <div class="flex-item-full-width">Test item</div>
      </div>
      <div>Test Item</div>
    </div>
  </body>
</html>

What is supposed to happen with flex-basis: column,wrap?

#example-element {
border: .75em solid;
padding: .75em;
width: 40%;
float: left;

display: flex;

flex-flow: column wrap;

}

#example-element>div {
background-color: rgba(0,0,255,.2);
border: 3px solid #00f;
width: 60px;
margin: 10px;
}

.short {
  background-color: tomato;
  height: 200px;
}

.tall{
  background-color: aquamarine;
  height: 400px;
}

<div id="example-element" class="transition-all short">
            <div>Item One</div>
            <div>Item Two</div>
            <div>Item Three</div>
            <div>Item Four</div>
            <div>Item Five</div>
            <div>Item Six</div>
        </div>
        
        <div id="example-element" class="transition-all tall">
            <div>Item One</div>
            <div>Item Two</div>
            <div>Item Three</div>
            <div>Item Four</div>
            <div>Item Five</div>
            <div>Item Six</div>
        </div>

Make ALL flex-items wrap (like flex-direction: column) when any one flex-item too wide for flex-container

The key insights here are:

1) This problem is a two dimensional problem.

Two dimension problems: solve with display: grid;

One dimension problems: solve with display: flex;

I was thinking as this problem as a single dimension problem because I wanted my radio buttons to be in one case horozontal, and in the other case vertical - both refer to a single dimension. I was wrong because it involves a transition between being vertical and being horozontal, so it is a two dimension problem.

2) grid-auto-flow: column;

I also had to pick an arbitrary view port width to flick from vertical to horozontal, and use a @media statement.

This answer is not perfect, it does not equally size the options when they are not in one horozontal line, but it achieves what I was looking for:

<html>
  <head>
    <title>Responsive Radio Button</title>
    <style type="text/css">
      @media(max-width: 600px) {
        .resize {
          grid-template-columns: 600px;
        }
      }
      @media(min-width: 600px) {
        .resize {
          grid-auto-flow: column;
          grid-auto-columns: 1fr;
        }
      }
      .gridContainer {
        display: grid;

        /** border so I can see what is going on */
        border: 1px dotted lightblue;
      }
      .gridItem {
        /** white-space and min-width stop text wrapping **/
        white-space: nowrap; 
        min-width: max-content;
        /** border and margin so I can see what is going on */
        border: 1px solid black;
        margin: 2px;

      }
      </style>
  </head>
  <body>
    <div class='gridContainer resize'>
      <div class='gridItem'>Medium Length div</div>
      <div class='gridItem'>Short div</div>
      <div class='gridItem'>Short div</div>
      <div class='gridItem'>Short div</div>
      <div class='gridItem'>Longest div in this entire html page!</div>
      </div>
    </div>
  </body>
</html>

Flex columns only center when wrapped

align-content works only when there are multiple lines in the flex container.

align-items or align-self is needed to align a single line.

Here's a complete explanation:

How does flex-wrap work with align-self, align-items and align-content?

.filter_drop {  display: flex;  flex-flow: column wrap;  align-content: center;  align-items: center; /* NEW */  list-style: none;  margin: 0;  padding: 0;  max-height: 7em;  border-bottom: 1px solid black;}
.filter_drop li {  margin: 0 1em 0 0;  line-height: 1.2;}

<ul class="filter_drop">  <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></ul><ul class="filter_drop">  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li>  <li>Five</li>  <li>Six</li>  <li>Seven</li></ul><ul class="filter_drop">  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li></ul><ul class="filter_drop">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

Make flex items wrap in a column-direction container

Block-level elements, by default, take up the full width of their containing block. This, in effect, resolves to width: 100%, which sets a break in the flow of content in the horizontal direction.

So, flex items can wrap by default in a row-direction container.

Nothing in HTML or CSS, however, sets a default height on block-level elements. Heights are content-driven (height: auto).

This means that elements will flow vertically without having any reason to break.

(I guess somewhere along the line of evolution, possibly on the basis of usability studies, it was decided that it would be okay for web applications to expand vertically, but not horizontally.)

That's why flexbox doesn't automatically wrap items in column direction. It requires an author-defined height to serve as a breaking point.

Often times, however, a layout's height is dynamic so a specific height cannot be set. That makes flexbox unusable for wrapping items in column direction. A great alternative is CSS Grid Layout, which doesn't require a height setting on the container:

div {  display: grid;  grid-gap: 10px;}
p:nth-child(3n + 1) {  grid-row: 1;  background-color: aqua;}
p:nth-child(3n + 2) {  grid-row: 2;  background-color: orange;}
p:nth-child(3n + 3) {  grid-row: 3;  background-color: lightgreen;}
p {  margin: 0;  padding: 10px;}

<div>  <p>ONE</p>  <p>TWO</p>  <p>THREE</p>  <p>FOUR</p>  <p>FIVE</p>  <p>SIX</p>  <p>SEVEN</p>  <p>EIGHT</p>  <p>NINE</p></div>