Flexbox move div to the right without affect other divs [duplicate]-CodePudding

This question already has answers here:

Note: The two middle divs are supposed to be centered and the sizes are mostly irrelevant.

I tried setting the flex container with justify-content: center and the last child div with margin-left: auto but it just moves the other 2 divs far to the left.

Any way to achieve this layout?

CodePudding user response：

I would put the two boxes insides their own container div with display: flex; and then justify-content: center; and width: 100%; for the inner container.

Here's a codepen.io snippet for implementing the same: https://codepen.io/yagyagaire/pen/YzQMeGN

.container {
   display: flex;
}

.container__sub {
   justify-content: center;
   width: 100%
}

.green-box {
   width: 100px;
   height: 100px;
   background-color: green;
   border: 5px solid black;
}

<!-- HTML5 layout -->
<div class="container container__main">
  <div class="container container__sub">
    <div class="green-box">    </div>
    <div class="green-box">    </div>
  </div>
  <div class="green-box">
  </div>
</div>

CodePudding user response：

I can't tell what sizes your green squares are, whether they're supposed to all be the same width, or whether those green center squares are perfectly centered, but this is one way.

.container {
  display: flex;
  background: pink;
  justify-content: center;
}

.container > div {
  background: green;
  height: 50px;
  display: block;
  border-left: 1px solid #e2e2e2;
  width: 20%;
}

.container > div:nth-child(1),
.container > div:nth-child(3) {
  margin-left: 20%;
}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

If you wanted to have the green boxes dead center, and the end green box floating to the right, you could use position: absolute; which may do what you want it to (I know you wanted to use flexbox though).

.container {
  display: flex;
  background: #e2e2e2;
  justify-content: center;
}

.container > div {
  background: green;
  height: 50px;
  display: block;
  border: 1px solid #e2e2e2;
  width: 20%;
}

.container > div:nth-child(3) {
  position: absolute;
  right: 0;
  width: 10%;
}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

CodePudding user response：

I think this is what you want. As you said I only used flexbox to achieve this.

.box{
  height:80px;
  width:80px;
  background:green;
  display:flex;
  justify-content:center;
  align-items:center;
  border:2px solid black;
}
.div1{
  flex:1;
}
.div2{
  flex:1;
}
.wrapper{
  display:flex;
  justify-content:center;
  background:rgba(0,0,0,0.5);
}
.box1{
  float:right;
}
.wrapper2{
  display:flex;
  justify-content:space-between;
}

<div class="wrapper">
  <div class="div1">
  <div class="box box1">
    box1
  </div>
  </div>
  <div class="wrapper2 div2">
    <div class="box">box2</div>
    <div class="box box3">box3</div>
  </div>
</div>

Page link：https//www.codepudding.com/Blockchain/137122.html

Prev:how to select images with JS?

Next:How to set width and height to content image in css