Using tailwind. I'd like item 1, item 2 to start from left of screen item 3 to start from right of screen. I'm seemingly lost trying to self-answer the following questions:

1. does flex class need to be explicitly specified in child components? Shouldn't, but flex-row doesn't work without flex added in.
2. why isn't item 3 moved to the right? If all inner divs are removed and justify done on parent it works as expected.

Playground: https://play.tailwindcss.com/AwJKkx66oW

Snippet:

<div >
  <!-- left side -->
  <div >
    <div >Item 1</div>
    <div >Item 2</div>
  </div>
  <!-- right side -->
  <div >
    <div>Item 3</div>
  </div>
</div>

CodePudding user response：

if your two container have the same size justify-start and justify-end will do nothing. all item will be align without separation

the idea to have a next item after a certain element align at the end is :

• have a flex container
• have margin left-auto on item that should be at the end (you can play with nth-child(3)

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}

p {
  margin: 3px;
  height: 75px;
  width: 75px;
  background: red;
}

p:nth-child(3) {
  margin-left: auto;
}

<div >
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>