Flexbox: Arrange two items horizontally without setting a maximum width

Question

Flexbox: Arrange two items horizontally without setting a maximum width

I'm not sure if it's possible with flexbox, but I am looking to create a list with two items displayed side by side where the width of each item adjusts based on the content. Here is an example:

<div class="items">
  <div class="item">Item 1 with text</div>
  <div class="item">Item 2 with more text</div>
  <div class="item">Item 3 with some text</div>
  <div class="item">Item 4 without text</div>
  <div class="item">Item 5 lorem</div>
  <div class="item">Item 6 ipsum</div>
  <div class="item">Item 7 with lorem</div>
  <div class="item">Item 8 with ipsum</div>
</div>

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  align-self: flex-end;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

.item:nth-child(even) {
  background-color: darkgrey;
}

Is there a way to ensure that always two items are displayed side by side regardless of how many list items are present? There are no outer containers limiting the width, and I prefer not to use float. Would using grid template columns offer a flexible solution?

The desired end result should look like this (but aligned to the right):

https://i.sstatic.net/FMIdi.jpg

html css flexbox alignment

Answer 1

Answer №1

Along with the solution provided by theAlexandrian, an additional approach is to include an inner wrapper using the inner div element styled as inline-block for customization such as padding.

When working with inline elements, similar to characters, they may have space between them. One technique to eliminate this space is by applying a negative margin. Here are some other alternatives:

How can I remove the space between inline-block elements?

It's important to note that since the width of the space is influenced by the font, adjustments to the negative margin might be necessary.

Stack snippet

.items {
  text-align: right;
}

.item {
  display: inline;
  margin-right: -4px;        /*  remove space between inline elements */
}

.item div {
  display: inline-block;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

.item:nth-child(even) div {
  background-color: darkgrey;
}

.item:nth-child(even)::after {
  content: '\A';
  white-space: pre;
}

<div class="items">
  <div class="item"><div> Item 1 with text </div></div>
  <div class="item"><div> Item 2 with more text </div></div>
  <div class="item"><div> Item 3 with some text </div></div>
  <div class="item"><div> Item 4 without text </div></div>
  <div class="item"><div> Item 5 lorem </div></div>
  <div class="item"><div> Item 6 ipsum </div></div>
  <div class="item"><div> Item 7 with lorem </div></div>
  <div class="item"><div> Item 8 with ipsum </div></div>
</div>

Answer 2

Along with the solution provided by theAlexandrian, an additional approach is to include an inner wrapper using the inner div element styled as inline-block for customization such as padding.

When working with inline elements, similar to characters, they may have space between them. One technique to eliminate this space is by applying a negative margin. Here are some other alternatives:

How can I remove the space between inline-block elements?

It's important to note that since the width of the space is influenced by the font, adjustments to the negative margin might be necessary.

Stack snippet

.items {
  text-align: right;
}

.item {
  display: inline;
  margin-right: -4px;        /*  remove space between inline elements */
}

.item div {
  display: inline-block;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

.item:nth-child(even) div {
  background-color: darkgrey;
}

.item:nth-child(even)::after {
  content: '\A';
  white-space: pre;
}

<div class="items">
  <div class="item"><div> Item 1 with text </div></div>
  <div class="item"><div> Item 2 with more text </div></div>
  <div class="item"><div> Item 3 with some text </div></div>
  <div class="item"><div> Item 4 without text </div></div>
  <div class="item"><div> Item 5 lorem </div></div>
  <div class="item"><div> Item 6 ipsum </div></div>
  <div class="item"><div> Item 7 with lorem </div></div>
  <div class="item"><div> Item 8 with ipsum </div></div>
</div>

Answer 3

Answer №2

If you're looking for an alternative to using float, I have a clever solution just for you! :)
We can utilize inline, block, :nth-child, and ::after.

Here's the code:

.item {
  display: inline;
}

.item:nth-child(2n)::after {
  display: block;
  content: '';
}

<div class="items">
  <div class="item">Item 1 with text</div>
  <div class="item">Item 2 with more text</div>
  <div class="item">Item 3 with some text</div>
  <div class="item">Item 4 without text</div>
  <div class="item">Item 5 lorem</div>
  <div class="item">Item 6 ipsum</div>
  <div class="item">Item 7 with lorem</div>
  <div class="item">Item 8 with ipsum</div>
</div>

This solution is straightforward, right?

Answer 4

If you're looking for an alternative to using float, I have a clever solution just for you! :)
We can utilize inline, block, :nth-child, and ::after.

Here's the code:

.item {
  display: inline;
}

.item:nth-child(2n)::after {
  display: block;
  content: '';
}

<div class="items">
  <div class="item">Item 1 with text</div>
  <div class="item">Item 2 with more text</div>
  <div class="item">Item 3 with some text</div>
  <div class="item">Item 4 without text</div>
  <div class="item">Item 5 lorem</div>
  <div class="item">Item 6 ipsum</div>
  <div class="item">Item 7 with lorem</div>
  <div class="item">Item 8 with ipsum</div>
</div>

This solution is straightforward, right?

Answer 5

Answer №3

Have you experimented with utilizing CSS columns for layout?

.column-layout {
  columns: 2;
}

<div class="column-layout">
  <div class="column-item">Item 1 containing text content</div>
  <div class="column-item">Item 2 showcasing more textual information</div>
  <div class="column-item">Item 3 providing some text details</div>
  <div class="column-item">Item 4 lacking textual data</div>
  <div class="column-item">Item 5 with lorem ipsum content</div>
  <div class="column-item">Item 6 displaying ipsum lorem content</div>
  <div class="column-item">Item 7 presenting lorem examples</div>
  <div class="column-item">Item 8 featuring ipsum samples</div>
</div>

Answer 6

Have you experimented with utilizing CSS columns for layout?

.column-layout {
  columns: 2;
}

<div class="column-layout">
  <div class="column-item">Item 1 containing text content</div>
  <div class="column-item">Item 2 showcasing more textual information</div>
  <div class="column-item">Item 3 providing some text details</div>
  <div class="column-item">Item 4 lacking textual data</div>
  <div class="column-item">Item 5 with lorem ipsum content</div>
  <div class="column-item">Item 6 displaying ipsum lorem content</div>
  <div class="column-item">Item 7 presenting lorem examples</div>
  <div class="column-item">Item 8 featuring ipsum samples</div>
</div>

Flexbox: Arrange two items horizontally without setting a maximum width

Answer №1

Answer №2

Answer №3

Similar questions

Create a fixed navbar while scrolling in Angular 5

Cause a bootstrap column to have overflowing content rather than expanding

Resolving problems related to window scrolling in javascript for implementing a "sliding door" style animation triggered by a scroll event

Receiving an absence of string or a null value from a text box

Search the database using a single text field and then automatically fill in the remaining fields using PHP

What could be the reason for my post container not functioning properly?

Utilizing CSS for styling a specific class in a Joomla Module

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

CDK virtual scroll problem occurs when scrolling down, items are displayed slowly and occasionally blank for a few seconds

What steps should I take to incorporate Google AdSense advertisements onto my website?

What are the steps for implementing the innerClass style on the searchBox within the appBase?

Utilize the identical mathematical equation across various jQuery values

Enhancing navbar with a dropdown menu in CSS

Issue with CSS background image not showing up in Internet Explorer 8

Scrape data from websites where the main URL remains constant but the information in the table varies

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Loading an HTML page using jQuery's .load() method that contains embedded JavaScript

Looking for assistance with fundamental HTML concepts

Utilizing jQuery to convert letter input values into English: a step-by-step guide

What might prevent an onSubmit event from triggering the execution of "checkTheForm()"?