I have three buttons and i want to align them in a row and they should get equal space.

For example i have something like this:-

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Now i want to align all the buttons in a single row having equal space so that if i add another button in future i don't need to worry and every button will have equal space.

I have three buttons and i want to align them in a row and they should get equal space.

For example i have something like this:-

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Now i want to align all the buttons in a single row having equal space so that if i add another button in future i don't need to worry and every button will have equal space.

• javascript
• html
• css

• 1 Have you tried anything? what does your 'child' class look like? – Katie.Sun Commented Nov 20, 2018 at 17:26
• 3 Flexbox is your friend