Add space and keep elements on the right side-CodePudding

I have these 2 children elements and I want them on the right side(I have that working just fine), but now I want to add more space between them and having a hard time to get that to work. Can someone tell me what I'm missing, please? thanks

section {
 background: yellow;
 display: flex;
 justify-content: flex-end;
}

 <section>
   <button>Cancel</button>
   <button>Confirm</button>
 </section>

CodePudding user response：

gap property can help you

    section {
        background: yellow;
        display: flex;
        justify-content: flex-end;
        gap: 5px;
    }

dont create more containers if you can avoid this. This is my principle

CodePudding user response：

You can assign a default class to your buttons, or set a new class to your elements, and specify (for example) a margin that will be applied.

consider the following example:

section {
 background: yellow;
 display: flex;
 justify-content: flex-end;
}
.elementContainer{
  margin: 5px;
}

 <section>
  <div class='elementContainer'>
   <Button variant="secondary">Cancel</Button>
  </div>
  <div class='elementContainer'>
   <Button variant="primary">Confirm</Button>
  </div>
</section>

This will add a 5px margin around each item with the element class. you may change this style according to your needs.

CodePudding user response：

You can use column-gap

So try this:

HTML:

<section>
   <Button variant="secondary">Cancel</Button>
   <Button variant="primary">Confirm</Button>
 </section>

CSS:

section {
 background: yellow;
 display: flex;
 justify-content: flex-end;
 column-gap: 10px;
}