CODEWITHSUNDEEP
htmlcsswidthflexbox
Phill
Phill

Reputation: 546

Is this a correct use for display:flex?

Is this a correct use case?

Display: flex on a <ul>, and then every <li> has either a pixel or percentage based width.

The main reason I want to use it is so that I can utilise align-items: center (vertical alignment).

It seems to work well, and I can't get it working this nicely with anything else, but it feels wrong because I'm not actually using any flex values on the list items.

Upvotes: 4

Views: 128

Answers (1)

Paul Werelds
Paul Werelds

Reputation: 66

Yes, that use is perfectly valid. It just means all the children get their default behaviour, which is flex: 0 1 auto (syntax is flex: <flex-grow> <flex-shrink> <flex-basis>). And that happens to do what you want, which is simply align all the items appropriately. You don't want any items to grow (flex-grow: 0), they should all shrink to equal sizes (flex-shrink: 1) if necessary to fit and you want them laid out according to the content (flex-basis: auto).

I recommend going through the following page, because it explains it quite clearly: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It explains all the attributes, has examples and links to the most crucial W3 resources when necessary, such as http://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg for flex-basis.

Upvotes: 5

Related Questions