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
.twoelement without impacting the other elements in the container.
Is it possible to achieve this using flexbox properties?