Home / Css / Flexbox / Html / Layout

Flexbox Layout Pattern: 3 Squares Ordered (1 Large Left, 2 Small Right Stacked)

July 02, 2024 Post a Comment

I'm trying to achieve the following ordered layout with flexbox: HTML:

BOX A
Solution 1:
With flexbox you would need a known (or calculable) height to achieve this without changing the HTML.
Baca Juga
```
* {
  margin: 0;
  padding: 0;
}
.box-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
  list-style-type: none;
}
.boxa {
  background: red;
  flex: 00100%;
  width: 50%;
}
.boxb {
  background: orange;
  order: 2
}
.boxc {
  background: lightgreen;
}
.boxb,
.boxc {
  flex: 0050%;
  width: 50%;
}
```
```
<ulclass="box-wrapper"><liclass="box boxa">BOX A</li><liclass="box boxb">BOX B</li><liclass="box boxc">BOX C</li></ul>
```

Post a Comment for "Flexbox Layout Pattern: 3 Squares Ordered (1 Large Left, 2 Small Right Stacked)"