Arranging elements within the flex container in perfect alignment

Question

Arranging elements within the flex container in perfect alignment

I'm stuck trying to figure out how to adjust the layout of a flex container with three child elements. Here is the code I'm working with:

html,body,div {margin:0;padding:0;}
.cont {
  display: flex;
  justify-content: space-between;
  height: 100px;
  background: #eee;
}
.one, .two, .three {width: 150px;}
.one {
  background: #009;
}
.two {
  background: #090;
}
.three {

  background: #900;
}

<div class="cont">

  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>

</div>

I am specifically trying to change the position of .two so that it is directly after .one without any spacing in between. The self-align property is not achieving the desired effect for me.

This adjustment needs to be made within the flexibility of the flexbox layout, rather than relying on absolute positioning.
I want to target and modify only the .two element without impacting the other elements in the container.

Is it possible to achieve this using flexbox properties?

css flexbox

Answer 1

Answer №1

To easily adjust the layout, just modify the margin property of the .two element:

html,
body,
section {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100px;
  background: #eee;
}

.box1,
.box2,
.box3 {
  width: 150px;
}

.box1 {
  background: #009;
}

.box2 {
  background: #090;
  margin-right: auto;
}

.box3 {
  background: #900;
}

<div class="container">

  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>

</div>

Answer 2

To easily adjust the layout, just modify the margin property of the .two element:

html,
body,
section {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100px;
  background: #eee;
}

.box1,
.box2,
.box3 {
  width: 150px;
}

.box1 {
  background: #009;
}

.box2 {
  background: #090;
  margin-right: auto;
}

.box3 {
  background: #900;
}

<div class="container">

  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>

</div>

Arranging elements within the flex container in perfect alignment

Answer №1

Similar questions

Using jQuery to locate text and apply a specific class

JavaScript WYSIWYG Algorithm

CSS Duo-Toned Background

Ways to automatically adjust the margins of my HTML body page

Surprising Outcomes of Negative Margin in jQuery Animation

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

Resolving the Table Issue with 'onclick' in Javascript

Concealing and organizing navigation bar items for mobile devices

How can I eliminate unnecessary gaps in a CSS slider design?

Hover over the image to reveal sliding text

What is causing an empty box to appear due to padding? Is there a way to conceal it

What is the process for layering one image on top of another in HTML?

The CSS background-image and background-color do not load on IE8

Using jQuery to smoothly animate a sliding box horizontally

Learning the basics of JavaScript: Displaying the last number in an array and restarting a function

Using jQuery to create a dynamically moving div that forms an endless wall

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

Swap a jQuery class with another if the class for ul li is currently active

Display validation messages when the user either clicks out of the textbox or finishes typing

Spinning and disappearing gradually over a set period of time