CODEWITHSUNDEEP
htmlcssflexbox
Chunbin Li
Chunbin Li

Reputation: 2244

How can I remove height in FlexBox children when the direction is row?

Background

At first, I wanted to narrow the space between two lines of text through line-height in the FlexBox, but line-height can't work on the flex-direction:row, it will always fill the height itself, unless I change the direction to column

enter image description here

Question

How can I remove filling the heights in the flexbox children when the direction is row like as column, or some articles explain the different strategies for row and column filling the heights

I had tried to use align-item: center, but it can't work, you can see my snippet, it still has the heights.

enter image description here

.container {
  width : 200px;
  height : 200px;
  display : inline-flex;  
  flex-wrap : wrap;
}

.container_row {
  flex-direction : row;
}
.box {
  width : 100%;
  background-color : red;
}

.container_column {
  flex-direction : column;
}

.container_align_center {
  align-items : center;
}
}
<h2>row</h2>

<div class="container container_row">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

<br/>

<h2>row with align center<h2>

<div class="container container_row container_align_center">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

<br/>

<h2> column </h2>

<div class="container container_column">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

Upvotes: 2

Views: 1790

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371779

An initial setting in a flex container is align-content: stretch.

That means that free space in the container – in the cross-axis – will be distributed evenly among flex items.

As a result, in a row-direction container, items will expand vertically consuming all available height.

You can override this default setting with flex-start, flex-end, center or other possible values.

.container {
  width: 200px;
  height: 200px;
  display: inline-flex;
  flex-wrap: wrap;
}

.container_row {
  flex-direction: row;
  align-content: flex-start; /* NEW */
}

.box {
  width: 100%;
  background-color: red;
}

.container_column {
  flex-direction: column;
}
<div class="container container_row">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

<div class="container container_column">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

Upvotes: 2

Related Questions