FlexBox - 如何显示一列 100% 和另外两列 50%

Question

Looking at the bellow code, I'm trying to have the 3 child columns as follow:

The first column should be 100% wide and above two other columns. Two other columns should be bellow the first column and each 50% wide.

Like this:

 .flex-container { width: 80%; min-height: 300px; margin: 0 auto; display: flex; }.flex-container.column { padding: 10px; background: #dbdfe5; flex: 1; }.column.first { background: blueviolet; }.column.third { background: #b4bac0; }

 <div class="flex-container"> <div class="column first">Column 1</div> <div class="column second">Column 2</div> <div class="column third">Column 3</div> </div>

But whatever I try it doesn't work that way.

Is it possible or I'm trying an impossible layout?

Answer 1

Flexbox version

You can use flex-wrap: wrap on the container to make children that overflow go below, and use flex-basis: 100% on the first child and flex-basis: 50% on the 2 others.

I have also added box-sizing: border-box on the children, to avoid border or padding count in the percentage.

 .flex-container { width: 80%; min-height: 300px; margin: 0 auto; display: flex; flex-wrap: wrap; }.flex-container.column { padding: 10px; background: #dbdfe5; box-sizing: border-box; }.column.first { background: blueviolet; flex-basis: 100%; }.column.second { flex-basis: 50%; }.column.third { background: #b4bac0; flex-basis: 50%; }

 <div class="flex-container"> <div class="column first">Column 1</div> <div class="column second">Column 2</div> <div class="column third">Column 3</div> </div>

Grid version

The grid version is even simpler, you only need display: grid on the container, and grid-column: 1 / 3 on the first child.

 .flex-container { width: 80%; min-height: 300px; margin: 0 auto; display: grid; }.flex-container.column { padding: 10px; background: #dbdfe5; }.column.first { background: blueviolet; grid-column: 1 / 3; }.column.third { background: #b4bac0; }

 <div class="flex-container"> <div class="column first">Column 1</div> <div class="column second">Column 2</div> <div class="column third">Column 3</div> </div>