CODEWITHSUNDEEP
htmlcssflexboxvertical-alignment
takeradi
takeradi

Reputation: 3861

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 can appear next to each another (side by side in a row) in a flexbox which has a flex-direction set to column? Please note that I do not want to wrap C, D, E in a container to get the desired result

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>

Upvotes: 8

Views: 19684

Answers (2)

Andrew Bone
Andrew Bone

Reputation: 7291

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, did I misunderstand the question?

Upvotes: 8

kukkuz
kukkuz

Reputation: 42352

You can do that using flexbox properties itslef - instead of inline-block use align-self: center (or flex-start as you see fit)

.c,.d,.e {
  align-self: center;
}

See demo below:

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 {
  align-self: center;
}

.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>

Upvotes: 15

Related Questions