F
F
freeman02042016-03-21 18:20:31
css
freeman0204, 2016-03-21 18:20:31

How to nicely align and adapt buttons with flexbox?

Code I sketched a small example. What I want. Previously, without flex boxing, in order to indent, they did it with a margin and the margin was removed from the last one, and if this latter was transferred to the second line when adaptive, it was necessary to add an indent to it in the media, in short, tin. Especially if there are 2-5 buttons nearby.
I thought flex box would save me from this, margin works differently there. What helped is justify-content: space-between;yes, without indents, I visually stepped back from each other. But why is the leftmost element not at the very edge? I specifically made buttons of different widths. flex-wrap: wrap;wraps to the second line, but because of the different widths, these buttons look terrible when wrapping.
59296b5e45b648d8a1db5f8a3bdb40c8.png
What I want. Tell me how to do it on flex without margins, i.e. whatever I write in the media then it will add an indent or not. And that when transferring the buttons, they would look more elegant. How to do it?
And maybe somehow on the flex it is possible to make indents without the lower margin?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nikita Nafranets, 2016-03-22
@Dimensi

I didn't quite understand what you want. Margins are still needed for your task, whether you like it or not.
codepen.io/dimensi/pen/jqBoLo

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question