Theodore Steiner Theodore Steiner - 1 year ago 175
CSS Question

Flexbox with Padding and Margins

Is it safe/acceptable when using flex containers to also use margin-top(bottom, left, right) and padding to shift a little space either, in between elements or to the left/right? Or is it better to use the flex-basis in combination with defined widths?

Answer Source

I think a better way to put your question is

Is margin & padding a "flex-way" to arrange elements inside a flex container? - Still doesn't make much sense but I guess the answer should explain why.


Flexbox(flexible box) is a layout concept to & just provides a more efficient way to lay out & distribute space among its elements inside a flex container & gives you extra power to control your elements with unique properties like order, flex-grow, flex-shrink etc. - Very similar to what a grid layout does. Now you wouldn't ask a question like - "Can you use grid frameworks like Bootstrap along with margin/padding?" would you?

A simple answer to your question - Ofcourse you can, it all depends on your requirements. Its subjective not wrong/right to use them with flex. So yes, you definitely can use margin/padding in conjuncture with Flexbox and your requirements demands it(which most of the time is the case) or you could just go complete "flex-way" using flex-basis(similar to width) etc. Sometimes when these won't suffice you will have to use padding/margin which again is very much safe/acceptable(I don't know what that means here though - however you take it).

Just need to understand that when you have defined a container as flex you cannot use few block properties like text-align etc.

Hope you got the right perspective.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download