How to flexibly show one item on the top line and two items on the bottom line using CSS

Question

How to flexibly show one item on the top line and two items on the bottom line using CSS

I've been trying to solve a simple problem with my flex container layout. I want to display 3 items in 2 rows - one item in the first row and the other 2 in the second row. However, no matter what I try, the items all end up on a single line due to the CSS settings.

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

I thought setting flex-wrap to wrap would fix it, but instead, the items stack vertically rather than across multiple lines as I expected. Even when I tried adjusting the CSS for the first item to take up the entire first row, it didn't work as planned.

div.intro_item_1 {
  flex-grow: 3;
}

I've consulted resources like CSS-Tricks, but I'm still struggling to find the right combination of commands to achieve the layout I want. Any guidance or advice would be greatly appreciated!

css flexbox

Answer 1

Answer №1

You could implement a solution similar to this:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

Check out the demo here: http://jsfiddle.net/73574emn/1/

This approach is built on the idea of wrapping content after one "row" is filled. By setting the first item's flex-basis to 100%, it ensures that the first row is completely filled. It's important to note the use of flex-wrap: wrap; in this model.

Answer 2

You could implement a solution similar to this:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

Check out the demo here: http://jsfiddle.net/73574emn/1/

This approach is built on the idea of wrapping content after one "row" is filled. By setting the first item's flex-basis to 100%, it ensures that the first row is completely filled. It's important to note the use of flex-wrap: wrap; in this model.

Answer 3

Answer №2

The response provided by Nico O is accurate. Nevertheless, there seems to be an issue with compatibility on Internet Explorer 10 to 11 and Firefox.

Upon investigation, I discovered that making a slight adjustment from

.flex > div
{
   flex: 1 0 50%;
}

to

.flex > div
{
   flex: 1 0 45%;
}

appeared to resolve the problem in IE. The exact reason for this change is unclear, but it may involve how IE handles the border-box or similar properties.

As for Firefox, my solution involved adding

display: inline-block;

to the elements.

Answer 4

The response provided by Nico O is accurate. Nevertheless, there seems to be an issue with compatibility on Internet Explorer 10 to 11 and Firefox.

Upon investigation, I discovered that making a slight adjustment from

.flex > div
{
   flex: 1 0 50%;
}

to

.flex > div
{
   flex: 1 0 45%;
}

appeared to resolve the problem in IE. The exact reason for this change is unclear, but it may involve how IE handles the border-box or similar properties.

As for Firefox, my solution involved adding

display: inline-block;

to the elements.

Answer 5

Answer №3

If you're using SCSS, consider this approach:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  >{
   flex: 1 0 50%;
}
&:first-child{
 flex: 0 1 50%;
}
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Displayed like this:

1             2
3

Answer 6

If you're using SCSS, consider this approach:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  >{
   flex: 1 0 50%;
}
&:first-child{
 flex: 0 1 50%;
}
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Displayed like this:

1             2
3

How to flexibly show one item on the top line and two items on the bottom line using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Mix up the colors randomly

The x-axis values in Amchart are transitioning rather than shifting

What is the best way to vertically center an item at the end of a card in Bootstrap 4?

rendering google charts using jade template

The on-screen keyboard using JQuery and CSS is not working properly on an HTML redesign

Creating a wide mega dropdown menu using Bootstrap 5.2 for a full-width page

Adjust the content of an iframe based on the size of the screen

Ways to eliminate the border color from bootstrap multiselect

Tips for permitting the "checking" of just a single checkbox

Create a hyperlink to the tabbed navigation menu

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

Styling each individual page in R Shiny with CSS

When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

Find all elements located in between two headers with varying ids

Ways to enhance the resilience of the max-width property when utilizing PHP calls or dynamic CSS styling

Preventing clicks underneath in Internet Explorer with CSS overlay

Overflow leads to the entire page scrolling

Images refusing to display within the div

Adjusting background-position-x while scrolling

What impact does switching from HTML input to form_for in Rails have on the structure of the code?