CODEWITHSUNDEEP
htmlcssflexbox
fcastillo
fcastillo

Reputation: 948

Align multiple elements with flex

I want to do something like that with flexbox:

enter image description here

.wrap {
  display: flex;
  flex-wrap: wrap;
}
.elem1 {
  width: 20%;
  height: 100px;
  border: 1px solid red;
}
.elem2, .elem3 {
  width: 75%;
  border: 1px solid red;
}
<div class="wrap">
  <div class="elem1">1</div>
  <div class="elem2">2</div>
  <div class="elem3">3</div>
</div>

JSFIDDLE

Upvotes: 1

Views: 2897

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 370993

Switch to flex-direction: column.

Add flex-wrap: wrap.

Define a height for the container (so the flex items know where to wrap).

Box #1 will consume all space in the first column, forcing the following boxes to wrap to a new column.

No changes to the HTML.

.wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;         /* NEW */
  height: 100px;                  /* NEW */
  justify-content: space-between; /* NEW */
}
.elem1 {
  width: 20%;
  flex-basis: 100%;               /* NEW */
  border: 1px solid red;
}
.elem2,
.elem3 {
  width: 75%;
  flex-basis: 40%;                /* NEW */
  border: 1px solid red;
}
<div class="wrap">
  <div class="elem1">1</div>
  <div class="elem2">2</div>
  <div class="elem3">3</div>
</div>

Upvotes: 3

Syden
Syden

Reputation: 8625

Something like this maybe (tweak values as desired):

1. Using your height (100px) & widths (20% & 75%):

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.wrap {
  height: 100px;
  display: flex;
  flex-flow: row wrap;
}
.row {
  width: 75%;
  display: flex;
  flex-flow: column wrap;
}
.elem1 {
  width: 20%;
  border: 1px solid lightgray;
}
.elem2 {
  height: 50%;
  border: 1px solid lightgray;
  flex: 1;
  margin: 10px;
}
.elem3 {
  height: 50%;
  border: 1px solid lightgray;
  flex: 1;
  margin: 10px;
}
<div class="wrap">
  <div class="elem1">1</div>
  <div class="row">
    <div class="elem2">2</div>
    <div class="elem3">3</div>
  </div>
</div>

2. Full width & height option:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.wrap {
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.row {
  width: 80%;
  display: flex;
  flex-flow: column wrap;
}
.elem1 {
  width: 20%;
  border: 1px solid lightgray;
}
.elem2 {
  height: 50%;
  border: 1px solid lightgray;
  flex: 1;
}
.elem3 {
  height: 50%;
  border: 1px solid lightgray;
  flex: 1;
}
<div class="wrap">
  <div class="elem1">1</div>
  <div class="row">
    <div class="elem2">2</div>
    <div class="elem3">3</div>
  </div>
</div>

Upvotes: 0

Related Questions