Flexbox Vertically Split Container in Half

flexbox vertically split container in HALF

Intuitively one would expect that this would work just with a flex-direction: column for the main container and the left container's height set to 100%.

Instead all browser do this: (this is a quote from another stackoverflow question)

How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?

So what you can do is wrap the two right containers into a new one:

Like this HTML - schema:

<div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

Here is a jsfiddle as an example how you could style it for the expected result.

In this example the 'main-container' is set to 50% width and 75% height of the body.

Split in half vertically and horizontally second flex item

Try this tell me if there is a problem in my answer

html:

<div class="desktop">
  <div class="yellow">lorem</div>
  <div class="orange">lorem</div>
  <div class="purple">lorem</div>
  <div class="green">lorem</div>

</div>

css:

* {
  box-sizing: border-box;
}
main,
div {
  display: flex;
  padding: 1rem;
}

.desktop {
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 100%;
}

div {
  flex: 1;
}

div.orange {
  background-color: #FFAD77;
  width: 30%;
  flex: 0 0 50%;
}

div.yellow {
  flex: 0 0 100%;
  width: 40%;
  background-color: #FFE377;
}

div.purple {
    flex: 0 0 50%;

  width: 30%;
  background-color: #FF77C8;
}
div.green{
  background-color: green;
  width:30%;
}

@media(max-width: 480px) {
  .desktop div {
    flex: 1;
    width: 100%;
  }
  div[orange] {
    order: -1;
    flex: 2;
  }
  div[yellow] {
    flex: 5;
  }
  div[purple] {
    flex: 1;
  }
  div[purple] {
    flex: 6;
  }
}

output:

make 1 full container in left and half and half container in right

Here something that can give you a start:

.container {  display: flex;  width: 100%;  justify-content: center;  height: 15em;}
.row {  width: 50%;}
.left {  background: red;}
.right {  background: yellow;}
.right div {  height: 50%;  display: flex;  justify-content: center;  align-items: center;}
.right div:nth-of-type(1) {  background: blue;}

<div class="container">  <div class="row left">      </div>  <div class="row right">    <div>      Top    </div>    <div>      Bottom    </div>  </div></div>

split space of a fixed size container equally. a case for flexbox?

Yes, you can use flex. Here's a little improvement for your code. Item1 doesn't need to have a flex rule and item2 and item3 will have flex: 1.

I also added the overflow-y: auto; rule to make it scrollable.

Example

#item1 {background-color: Bisque ; }
#item2 { flex: 1; background-color: DarkOrange ; overflow-y: auto;}
#item3 { flex: 1; background-color: MediumAquaMarine ; overflow-y: auto;}

Using column-count causes flex div to split the element in half

The posted code snippet was very close. The only change I made was this:

.container > div {
  display: inline-block;
  width: 100%;
}

First you need to set the child elements to inline-block like the answer you already looked at, however you also need to provide the children with a width. By setting the width: 100% your problem goes away.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      checkboxes: [],
    }
  },
})

.modal {
  width: 750px;
  height: 400px;
  overflow-y: scroll;
  border: 2px solid lightgrey;
}

.container {
  column-count: 3;
}

.v-input--checkbox {
  margin: 0.33em 0;
  padding: 0;
}

.container > div {
  display: inline-block;
  width: 100%;
}

.btn {
  background-color: tomato;
  color: white;
  padding: 1em;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>    
    <div class="modal">
      <div class="container">
        <v-checkbox label="testing"></v-checkbox>
        <v-checkbox label="abc"></v-checkbox>
        <v-checkbox label="testing lorem ipsum"></v-checkbox>
        <v-checkbox label="testing lorem"></v-checkbox>
        <v-checkbox label="testing ip"></v-checkbox>
        <v-checkbox label="testing dorset illemet lorem"></v-checkbox>
        <v-checkbox label="testing super long label text here this is long"></v-checkbox>
      </div>
    </div>
  </v-app>
</div>

Splitting flex container into equal width part

<ion-content scroll="false" has-header="true" style="display: flex; flex-flow: column;height:100vh; ">
    <div style="background-color: red;">
      Content 1 (height based on content)
    </div>
    <div style="background-color: blue; display:flex;flex-direction:row;height:100vh;">
    <div style="flex:1;hight:100vh;">
    content 2 part 1
    </div>
     <div style="flex:1;">
      Content 2 part 2
    </div>

    </div>
    <div>
      <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
    </div>
  </ion-content>

Flexbox: Container with two different directions

Is this what you want?

* {  box-sizing: border-box;}
.container {  width: 90%;  margin: 0 auto;  height: 90vh;  border: 1px solid red;}
.box {  display: flex;  height: 100%;  border: 1px solid yellow;  flex-direction: row;}
.box__half {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  width: 50%;  height: 100%;}
.box__half:first-child {  background: yellow;}
.box__half:last-child {  background: orange;}
.text {  width: 90%;  height: 30vw;  border: 1px solid green;  margin: 3% 0;}

<div class="container">  <div class="box">    <div class="box__half">      <div class="text"></div>      <div class="text"></div>      <div class="text"></div>    </div>    <div class="box__half">      <div class="text"></div>      <div class="text"></div>      <div class="text"></div>    </div>  </div></div>

Splitting divs into 2 columns

Nothing wrong with flexbox for this layout.

There's no need to use a pseudo-element.

.article-container {  display: flex;  flex-wrap: wrap;}
.article {  flex: 0 0 50%;  padding: 10px;}
* {  margin: 0;  box-sizing: border-box;}

<div class="article-container">  <div class="article">    <h3>title1</h3>    <p>article1</p>  </div>  <div class="article">    <h3>title2</h3>    <p>article2</p>  </div>  <div class="article">    <h3>title3</h3>    <p>article3</p>  </div>  <div class="article">    <h3>title4</h3>    <p>article4</p>  </div></div>

Flexbox - screen splitting on small screens

You can do this with aspect-ratio -> https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

html,body {  margin: 0;  padding: 0;  width: 100%;  height: 100%;}
.container {  display: flex;  border: 5px solid green;  flex-flow: row nowrap;  height: 100%;}
.container>div {  flex: 1;  height: 100vh;  color: white;  font-size: 40px;}
.container>.leftside {  background: red;}
.container>.rightside {  background: blue;}
@media (min-aspect-ratio: 9/8) {  .container {    display: flex;    border: 5px solid yellow;    flex-flow: column nowrap;  }  .container>div {    height: 50vh;  }}

<div class="container">  <div class="leftside">left</div>  <div class="rightside">right</div></div>

Split child divs into columns using flexbox

First you want to use flex-direction: column to get the children in a column, then define height to be the height of 11 children, which is their height * 11 + their bottom margin. And add align-content: flex-start to keep the columns aligned to the left, instead of creating additional space between the columns.

Then set the width of the children instead of using flex-basis since it's a column, define a margin-right to create space between the columns, and use :nth-child(even) or (odd) to do the striping.

.parent { display: flex; flex-wrap: wrap;  flex-direction: column;  height: calc(20px * 11 + 11rem);  align-content: flex-start;}.parent div {  width: 31%;  background: grey;  height: 20px;  margin-bottom: 1rem;  margin-right: 1em;}
.parent div:nth-child(even) {  background: black;  color: white;}

<div class="parent">  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>  <div>10</div>  <div>11</div>  <div>12</div>  <div>13</div>  <div>14</div>  <div>15</div>  <div>16</div></div>

---

Related Topics