CODEWITHSUNDEEP
htmlcssflexbox
Mr. Jo
Mr. Jo

Reputation: 5261

How can I make a 2 column layout with flex in CSS?

Currently I've a flex layout with 2 columns. But the problem is, that I need to set the width of the left column to the width of the max width left column that exists. How can I do this?

p {
    display: flex;
    display: -ms-flexbox;
    line-height: 2;
    align-items: flex-start;
    position: relative;
}
<div>
  <p>
    <span>Test 1</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test test test test test</span>
    <span>Content test test test</span>
  </p>
  <p>
    <span>Test test 2</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test blub</span>
    <span>abc</span>
  </p>
</div>

Upvotes: 1

Views: 2978

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

This is a CSS table layout not a flexbox layout:

.table {
  display: table;
}

.table p {
  display: table-row;
  line-height: 2;
}

.table p span {
  display: table-cell;
}
<div class="table">
  <p>
    <span>Test 1</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test test test test test</span>
    <span>Content test test test</span>
  </p>
  <p>
    <span>Test test 2</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test blub</span>
    <span>abc</span>
  </p>
</div>

Upvotes: 0

Webmaster G
Webmaster G

Reputation: 532

In your HTML:

<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>

And in your css:

.row {
    display: flex;
}

.column {
    flex: 50%;
}

Bootstrap (4) has solved this issue by using row and col class names.

Upvotes: 1

Related Questions