How to move a flex container to the right?-CodePudding

I have a flex container that contains a varying number of other flex containers. I'm trying to get the outermost container to be justified to the right and only take up 60% of the available width. Then I want to have another flex container take up that space on the left. #Feed is the outermost container and the .tweets are its children. #friends is the independent flex container.

#feed {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 60%;
}
.tweet {
  display: flex;
  border: 2px solid red;
  border-radius: 25px;
  flex: 1;
  flex-wrap: wrap;
}

#friends {
  display: flex;
}

CodePudding user response：

Here is an example of two flex items taking up 40% and 60% space.

#wrapper {
  display: flex;
}

.column-40 {
  width: 40%;
  background: lightgray;
}

.column-60 {
  width: 60%;
  background: grey;
}

.tweet {
  border: 1px solid blue;
}

<div id="wrapper">
  <div >
    <div >tweet</div>
    <div >tweet</div>
    <div >tweet</div>
  </div>
  <div >
    <div >tweet</div>
    <div >tweet</div>
    <div >tweet</div>
  </div>
</div>

When you just want the 60% wrapper to be aligned right you can remove the first column and justify the content to the end:

#wrapper {
  display: flex;
  justify-content: flex-end;
}

.column-60 {
  width: 60%;
}

.tweet {
  border: 1px solid blue;
}

<div id="wrapper">
  <div >
    <div >tweet</div>
    <div >tweet</div>
    <div >tweet</div>
  </div>
</div>