takeradi takeradi - 1 month ago 6
CSS Question

Inline block in a flexbox in the column direction

How do I make C, D, E which have a

display: inline-block
occupy only as much space as they need to fit the text inside of them and so that they can appear next to each other and wrap in a flexbox in the column direction without wrapping them inside of another div/container? Is there a flex property that can help me with this?



body {
padding: 0;
margin: 0;
}

.container {
display: flex;
flex-direction: column;
}

.a,.b,.c,.d,.e {
height: 50px;
line-height: 50px;
border: 1px solid;
text-align: center;
}

.c,.d,.e {
display: inline-block;
}

.a {
background: cyan;
}

.b {
background: yellow;
}

.c {
background: orange;
}

.d {
background: gray;
}

.e {
background: pink;
}

<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>




Answer

I think the best way to go about this is to say which lines you want to take up 100% (in width) and then have everything else just take up one line.

You'll notice I've added flex-wrap: wrap; so a new line gets started when needed.

body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.a,.b,.c,.d,.e {
  height: 50px;
  line-height: 50px;
  border: 1px solid;
  text-align: center;
  flex-grow: 1;
}

.a {
  background: cyan;
}

.b {
  background: yellow;
}

.c {
  background: orange;
}

.d {
  background: gray;
}

.e {
  background: pink;
}

.a,.b {
  width: 100%;
}
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>

EDIT: My answer is very different from the ones above, have I miss understood?

Comments