I've started using flex and I love how it works.
I'm using flex layout and I want the btn-group class inside dashboard-body to go full width of the parent. Right now its width is equal to the width of both buttons together.
What I want to achieve here is adding space between both buttons also I don't want to use margin right or left. I want the btn-group div to have full width of its parent dashboard-body so I can use the flex property align-content: space-between to have enough space between both buttons.
Is there any better way other than adding margin/padding around buttons to do the same?
Thanks.
Here is the code:
.dashboard-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; }<div class="dashboard-body"><p>You don't have any sales data.</p><p>Please add a new book or upload CSVs.</p><div class="btn-group"><a href="#"><input class="add-new-book-btn" type="submit" value="Add New Book"></a><a href="#"><input class="add-new-book-btn" type="submit" value="Upload CSV"></a></div>