CODEWITHSUNDEEP
cssflexbox
svenema
svenema

Reputation: 2526

Column based flexbox that makes use of all horizontal space

I have a set of checkboxes which are created alphabetically as flexbox items of a row-direction flexbox:

Even though I have specified a width and height here, these are not fixed and will change as the browser window size is changed.

    <div style="width:500px; height:400px;">
    <div style="background-color:#99F; display: flex; flex-direction:row; flex-wrap:wrap;">
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text A</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text B</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text C</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text D</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text E</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text F</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text G</div>

    </div>
    </div>

https://codepen.io/Stu42/pen/MWWvxYJ

I've set it up so it can grow to a maximum of three columns or stays as one or two columns when the space is restricted:

min-width:170px; max-width:33%; flex:1 1 170px;

I'm very happy with this responsive behaviour, but ideally the direction is column instead of row, in order to maintain alphabetical readability. For example: three columns should be like:

    A D G
    B E
    C F

And not:

    A B C
    D E F
    G

So basically, the question is, is it possible (and if so, how), to achieve this same behaviour in a column direction so that the text is alphabetical from top to bottom? I find that I cannot seem to tell flexbox to use all available horizontal space when specifying a column direction.

Note: Changing the way the text is generated is not trivial, especially because you can't know if how many columns you have; never the less, for completeness, this is how:

    <div v-for="(item, index) in list_of_values" :key="index" ...

Upvotes: 1

Views: 266

Answers (3)

svenema
svenema

Reputation: 2526

CSS columns

Altough it's use is not without issues of its own. In this scenario, the margin between the columns doesn't seem to be exactly controllable. But that's not too bad.

Thanks to 04FS for the suggestion.

Example of the solution (where the width of 500px is really the variable):

<div style="background-color:#99F; width:500px; margin:0px; padding:0px">

<div class="col-container">
    <div class="col-item"><input type="checkbox">Text A</div>
    <div class="col-item"><input type="checkbox">Text B</div>
    <div class="col-item"><input type="checkbox">Text C</div>
    <div class="col-item"><input type="checkbox">Text D</div>
    <div class="col-item"><input type="checkbox">Text E</div>
    <div class="col-item"><input type="checkbox">Text F</div>
    <div class="col-item"><input type="checkbox">Text G</div>
 </div>

</div>

The margins are largely ignored:

.col-container {
  background-color:#9F9;

  -webkit-columns: 3 200px;
  -moz-columns: 3 200px;
  columns: 3 200px;

  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;

  -webkit-column-gap: 0em;
     -moz-column-gap: 0em;
          column-gap: 0em;

   margin: 0px;
  padding: 0px;
  display: inline-block;
}

.col-item {
  border: 1px solid #f00;
  width: 200px;
  margin: 0px;
  padding: 0px;

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

}

https://codepen.io/Stu42/pen/MWWvxYJ

Upvotes: 0

Jeremy Harris
Jeremy Harris

Reputation: 24549

Yes, you can specify it as a flex column, and then set a max-height to force the wrap at the point you would like.

.page-container {
  width:515px; 
  height:400px;
}
.flex-container {
  background-color:#99F; 
  display: flex; 
  flex-direction:column; 
  flex-wrap:wrap; 
  max-height: 600px; 
  align-items: center;
  width: auto;
}
.flex-item {
  border:1px solid #f00; 
  min-width:170px; 
  max-width:33%;
  flex:1 1 170px;
}
<html>
    <body>
        <div class="page-container">
            <div class="flex-container">
                <div class="flex-item"><input type="checkbox">Text A</div>
                <div class="flex-item"><input type="checkbox">Text B</div>
                <div class="flex-item"><input type="checkbox">Text C</div>
                <div class="flex-item"><input type="checkbox">Text D</div>
                <div class="flex-item"><input type="checkbox">Text E</div>
                <div class="flex-item"><input type="checkbox">Text F</div>
                <div class="flex-item"><input type="checkbox">Text G</div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Facyo Kouch
Facyo Kouch

Reputation: 787

You have to give a height to the container which holds the flex styling (Try giving that a height of 400px) and set flex-direction: column. Also, the Flex item wil to flex: 0 170px so it won't take the full height of the container if their are no equal items.

<div>
    <div style="background-color:#99F; display: flex; flex-direction:column; flex-wrap:wrap; height: 500px">
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:0 170px;"><input type="checkbox">Text A</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:0 170px;"><input type="checkbox">Text B</div>

    </div>
 </div>

Upvotes: 0

Related Questions