CODEWITHSUNDEEP
htmlcssflexbox
Jakub
Jakub

Reputation: 123

Empty space for one columns width with flexbox

I have a parent div and two divs inside. I want to keep specific sizes (columns) for those child divs. Is this possible in flexbox? I'm strugling with this.

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
</div>

First child should have width of 1 column, second child width of 2 columns. On right side I want to have empty space in width of 1 column (so parent div should behave like it has 4 columns).

Upvotes: 0

Views: 2707

Answers (3)

Adam Jenkins
Adam Jenkins

Reputation: 55643

Nobody seems to have suggested you could just set the width of the parent:

.parent {
 width: 75%;
 display: flex;
}

.child {
  flex: 150;
  height: 2rem;
  border: 1px solid #000;
}

.child:first-child {
 flex: 75;
}
<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
</div>

EDIT:

And to add, you want your second child to be twice as big as your first, so give your second child a flex value of something that's twice as big as your first - I used 1 and 2, but you could've used flex: 75 and flex: 150 to achieve the same effect.

Upvotes: 1

showdev
showdev

Reputation: 29168

Here's a method using flex-basis to set flex items to specific percentage widths.

In this example, the two flex items can neither shrink nor grow. Splitting 100% width into four columns, each column needs to be 25% of the parent width. The first item is 25% and the second is 50% (two columns wide), leaving 25% space on the right.

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
}

.child:nth-child(1) {
  flex: 0 0 25%
}

.child:nth-child(2) {
  flex: 0 0 50%;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

EDIT

I notice you'd like some space between each column. One way is to add some right margin percentage to flex items and subtract that percentage from each item's flex-basis.

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 3%;
}

.child:nth-child(1) {
  flex: 0 0 22%;
}

.child:nth-child(2) {
  flex: 0 0 47%;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

If you'd rather that the space between columns not be a percentage, you can use calc() to calculate the appropriate flex-basis. However, note that this is not supported in IE or Edge at the time of this post.

IE & Edge are reported to not support calc inside a 'flex'. (Not tested on older versions) This example does not work: flex: 1 1 calc(50% - 20px);
caniuse.com

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 0.5em;
}

.child:nth-child(1) {
  flex: 0 0 calc(25% - 0.5em);
}

.child:nth-child(2) {
  flex: 0 0 calc(50% - 0.5em);
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

You can achieve this using flexbox by using a pseudo element that occupies the fourth column:

  • add flex: 1 to the first child and the pseudo element,

  • add flex: 2 to the second child.

See demo below:

.parent {
  display: flex;
  height: 100px;
  border: 1px solid #ddd;
}

.child {
  border: 1px solid cadetblue;
  background: lightblue;
  flex: 1;
}

.child + .child {
  flex: 2;
}

.parent:after {
  content: '';
  flex: 1;
}
<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
 </div>

And the easier solution using CSS Grid layout - establish a 4-column layout and span the second child element over two columns:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100px;
  border: 1px solid #ddd;
}

.child {
  border: 1px solid cadetblue;
  background: lightblue;
}

.child + .child {
  grid-column: span 2;
}
<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
 </div>

Upvotes: 1

Related Questions