Utilize flexbox to make two elements on the same line

Is it feasible to have two elements on the same line when aligning a series of elements with flexbox?

Consider this scenario:

.outer {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
}
.outer .inner {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>

The current layout shows the elements in a column. Can certain elements be grouped to share a row like shown in this image?

https://i.sstatic.net/dV4Ma.png

cssflexbox

Answer №1

Give this a try.

I adjusted the .outer by setting its flex-flow to row wrap; and defining its width.

Additionally, I specified the margin for 

.outer .inner:nth-child(3),.outer .inner:nth-child(4)

By ensuring that child 3 and 4 have a specific margin and width that does not exceed the width of the .outer, they will remain inline with each other while the other children occupy entire rows, given their margin and width matches that of the .outer width.

.outer {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  justify-content: center;
  align-items: center;
}
.outer .inner {
  width: 50px;
  height: 50px;
  margin-left: 35px;
  margin-right: 35px;
  margin-bottom: 20px;
  background-color: blue;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer .inner:nth-child(3),
.outer .inner:nth-child(4){
  margin-left: 5px;
  margin-right: 5px;
}
<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>

Answer №2

If you're looking to achieve a layout similar to this, you can follow these steps:

.outer {
  display: flex;
  margin:auto;
  flex-wrap:wrap;
  width: 50px;
}
.outer .inner {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer .inner:nth-child(3),.outer .inner:nth-child(4) {
  width:25px;
  position:relative;
}
.outer .inner:nth-child(3):before,.outer .inner:nth-child(4):before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-12px;
  right:-12px;
  background:blue;
  z-index:-1;
}

.outer .inner:nth-child(3) {
  transform:translateX(-20px)
}
.outer .inner:nth-child(4) {
  transform:translateX(20px)
}
<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

javascriptjquerycsstwitter-bootstrap

What exactly does this jquery library aim to achieve?

Recently, I discovered a new library for CSS3 animations. As someone who is still learning JavaScript, I am unsure of the benefits it offers. It appears to replicate what jQuery can already achieve but by utilizing CSS3. So, what advantage does using a to ...

jquerycssjquery-animatecss-transitions

How to make Vuetify grid columns wrap and fill the full height

I am facing an issue where the component created using v-card in a grid system does not fill the full height. I tried using d-flex but it did not work as expected. The middle column with a white v-card should occupy the entire column height but it is gett ...

cssvue.jsvuetify.js

Pair objects that possess a specific attribute

I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...

jqueryhtmlcss.nettelerik

Utilizing PHP to create an interactive website

As a novice PHP developer, I took to Google in search of tutorials on creating dynamic PHP websites. What I found was that many tutorials used the $_GET variable to manipulate URLs and make them appear like this: example.com/?page=home example.com/?page= ...

phpjavascripthtmlcss

What is the best way to dynamically adjust the top CSS of an element when it is positioned at the top or

Is there a way to dynamically set the top CSS when an element is over the top or bottom of a page? First, hover over the first cat image. It's working fine. http://image.ohozaa.com/i/480/7YpWei.jpg When I scroll the page to the bottom and hover ove ...

javascriptjqueryhtmlcss

Having trouble getting JavaScript to replace tags in HTML

I've been working hard to replace all the shared code in posts on my website, but I'm having trouble getting it to work. I want everything inside <pre><code></code></pre> tags to be colorized using CSS. Here's a sampl ...

javascriptjqueryhtmlcss

What is the best way to incorporate Bootstrap 5 into a content script without causing any conflicts with the existing CSS of the website? (Chrome Extension)

In the process of integrating the Bootstrap 5 library into a Chrome extension, I have encountered an issue where the CSS and JS files conflict with the main CSS file on certain websites. To address this, I have included the Bootstrap 5 (CSS and JS) files i ...

javascriptcssgoogle-chrome-extensionbootstrap-5

Gulp fails to generate a CSS file after compiling Sass to CSS

Recently, I've been having trouble compiling my sass file to css. Even though it was working fine before and I haven't made any changes, now my CSS file is empty. Below is the task I am trying to accomplish: gulp.task('sass', function ...

csssasscompilationgulp

The horizontal overflow in the HTML code was unsuccessful

I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...

javascriptjqueryhtmlcss

The position of a jQuery element gets reset when both the show and stop animations are used

When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets. function displayMessage(msg) { var $messageEl = $('#u ...

javascriptcssjquery-uijquery

Expanding the Background Color when Hovered Over

Despite my extensive search on SO, none of the answers I found seem to address my specific situation. In a col-md-2 section where I have a navigation bar, I am trying to change the background color to extend up to the border when hovering. While I can cha ...

htmlcsshover

jQuery not functioning properly when included in a separate JavaScript file

I'm facing an issue with my jquery code not working properly when I place it in a separate js file instead of embedding it directly into the html. Currently, my setup looks like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3 ...

jquerycssresponsive-design

Elements within the div are overlapping each other

Despite adding margin, my h3 tag and p tag in a div keep overlapping. .title { margin: 0 0 26px; width: 335px; height: 28px; font-size: 24px; font-stretch: normal; font-style: normal; line-height: 36px; letter-spacing: 0; text-align: c ...

htmlcss

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

Currently, I am interested in utilizing a one-line textarea (with rows=1 and overflow-x:hidden;) similar to input type="text. However, I have encountered an issue where the content scrolls with "jumps" while typing inside it: https://i.stack.imgur.com/Rzf ...

javascripthtmlcsstextareaoverflow

Error in THREE.js: Failed to retrieve object at http://192.168.8.104:8080/[object%20Object] (Error code: 404) - Module: three.module.js

During my attempt to create a text loader in THREE.js, I encountered an error instead of getting the expected text output. three.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404 (Not Found) I made various efforts to resolve this error ...

javascripthtmlcssthree.js

Ways to update the title of a Magento widget

I've added a widget to showcase new products on my Home page and it's displaying perfectly. However, I want to get rid of the title "New Product" that comes with it. This pesky little thing needs to go! https://i.sstatic.net/P0NeS.jpg I'm ...

cssmagentomagento-1.9

Line divider immediately following the title on the same row

I am looking to insert a separator line immediately following the H1 tag, however my attempts have been unsuccessful. Can someone provide assistance with this? <style> #sepr { border-top-width: 3 px; border-top-style: solid; ...

htmlcss

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

htmlcssmacostwitter-bootstrap

VUE array values not displaying flex-row properly

I've been working on creating an array of items in Vue and trying to use Tailwind CSS to make them flex-row, but I can't seem to get it right. Maybe there's something about the flex-row feature in Tailwind CSS that I'm missing. <div ...

vue.jsflexboxtailwind-css