Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two columns flex-box layout

Tags:

I need create layout which will contain list of items in two columns. Like i showed below:

.container {    border: 1px solid red;    height: 300px;    display: flex;    flex-direction: column;    justify-content: flex-start;    flex-wrap: wrap;  }    .item {    border: 1px dashed blue;    height: 50px;  }
<div class="container">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>    <div class="item">7</div>    <div class="item">8</div>  </div>
But there is a problem with such layout. If there will be only 1 item - it will take full width. And i need to keep columns even if there are a few items.
like image 829
Vovan Avatar asked May 29 '17 12:05

Vovan


People also ask

How do you make two columns responsive?

Responsive Two Column LayoutResize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).

How do I put two columns in one row in HTML?

More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added. <div class="column" > tag is used to add the corresponding number of columns.

How do you make a layout on flexbox?

If you want to use flexbox to create a simple graph visualization, all you need to do is to set align-items of the container to flex-end and define a height for each bar. flex-end will make sure that the bars are anchored to the bottom of the graph.


1 Answers

You can set a max-width for the item, equal to 50%. This will keep it, almost, the same width no matter what. I say almost because you also have borders set.

In order to keep the width exactly the same, you also have to set box-sizing: border-box for item.

So, your code will be:

.item {   border: 1px dashed blue;   height: 50px;   box-sizing: border-box;   max-width: 50%; } 

.container {    border: 1px solid red;    height: 300px;    display: flex;    flex-direction: column;    justify-content: flex-start;    flex-wrap: wrap;  }    .item {    border: 1px dashed blue;    height: 50px;    box-sizing: border-box;    max-width: 50%;  }
<div class="container">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>    <div class="item">7</div>    <div class="item">8</div>  </div>
like image 52
Chris Elioglou Avatar answered Oct 04 '22 11:10

Chris Elioglou