1

I cannot for the life of me get this to work. I want one item in the middle of the parent div and one item to the far right (end) of the parent div, each on the same row.

With my efforts, they either are both in the middle or on separate rows.

https://codepen.io/kiggs1881/pen/KKZWwBw

<div class="parent">
  <div class="one">Items</div>
  <div class="one">Items</div>
</div>


.parent {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: 600px;
 }

.one {
  display: inline-flex;
  justify-content: center;
}

.two {
  display: inline-flex; 
 justify-content: end;
}

Aligning in css is my greatest weakness.

jdost_26
  • 371
  • 1
  • 14
  • 1
    When I remove all the JS, then `.parent > * { margin-left: auto }` does the trick... With more than two child elements you would need `.parent { justify-content: space-between }` and `margin-xxx: auto` to move individual elements to an opposite side. – Rene van der Lende Jun 03 '22 at 01:32

1 Answers1

1

Here you go. I advise you to study up on flexbox so that you can see how you were using it incorrectly. You apply the flex attribute on a parent element, it is not needed on the child elements. The guide I have linked should help you.

.parent {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 600px;
}

.parent > div {
  margin-left: auto;
}
<div id="q-app">
  <div class="parent">
    <div>Items</div>
    <div>Items</div>
  </div>
</div>
Stephen M Irving
  • 1,324
  • 9
  • 20
  • 1
    Thank you, Stephen. I was way off on all my paths. I will keep studying, though I thought I had made progress and then this got me! – jdost_26 Jun 03 '22 at 02:16
  • 1
    Happy to help. Don't feel bad about getting tripped up, flexbox can be tricky to learn and it always obvious how to modify things to get an alignment like you needed here. – Stephen M Irving Jun 03 '22 at 15:42