Flex Align Icons

[darren-outdev]

Usage

Much like the LEFT, CENTER, and JUSTIFY text aligns, this would be for alignment of a Flexbox (to position its children). Suggestions for icons names would be:

• [ ] flex-row-start
• [ ] flex-row-end
• [ ] flex-row-center
• [ ] flex-row-none maybe stretch to be consistent?
• [ ] flex-column-start
• [ ] flex-column-end
• [ ] flex-column-center
• [ ] flex-column-none maybe stretch to be consistent?

Examples

Include any example images so we know what the icon should look like.

[Templarian]

@darren-outdev Updated your issue with some other names.

[zgover]

Proposal.

flex-align-baseline.svg.zip

flex-align-center.svg.zip

flex-align-end.svg.zip

flex-align-start.svg.zip

flex-align-stretch.svg.zip

flex-justify-center.svg.zip

flex-justify-end.svg.zip

flex-justify-space-arround.svg.zip

flex-justify-space-between.svg.zip

flex-justify-start.svg.zip

[Xenomorph99]

If not sure if others feel this way or not, but personally I find it hard to understand what's going on in these icons with so many lines and all the subtle differences. I'd recommend basing these Flexbox "align" icons on our current align icons. Possibly naming them align-flexbox-* or even simply align-*

• align-horizontal-center
• align-horizontal-left
• align-horizontal-right
• align-vertical-bottom
• align-vertical-center
• align-vertical-top

[zgover]

Yes, I actually didn't realize entirely how similar they are to the existing align icons initially. However to match the existing style it should be discussed how to display space-between, space-around, stretch. As far as the rest such as start, end and baseline could be substituted for the existing align top, bottom etc.

[darren-outdev]

Thanks for picking up this request! I do think there needs to be a rather 'non-developer' approach when thinking of designs - something that would make kinda sense to someone who isn't a developer, and requires a very low level of thought for a person familiar with the technicality of controls... Hope that makes sense?

[SintijaPotaicuka]

Hi,

I would like to pick up this issue. I believe that since the issue was created things have changed and space-between, space-around, stretch has become more common in the designer community.

I would like to propose these icons that I am using for Style Bar UI:

With names:

If I can get permission, I will create issues accordingly to the guidelines :)

[mririgoyen]

You don't need permission, anyone is able to contribute! Go for it!

[zgover]

@SintijaPotaicuka @goyney @Templarian actually before you revel your time and effort, I have been noticing a more common pattern as the ⤵ below picture and references, to which you are pretty close to already, but we should consider flexbox vs grid not only in available icons but also naming convention.

Flexbox ⤵ Source: https://flexbox.malven.co/

Grid ⤵ Source: https://grid.malven.co/

[mririgoyen]

Quite honestly, Google has most of these already made and in Chrome and we should probably just include theirs and fill in any missing gaps in the same style.

[zgover]

That would be great if they didn't have such a unique approach with a heavy weighted approach and without substantially deviating for their pattern it was most likely producing ambiguous results lacking to little of change in visual appearance, and we'd probably realize it as well during our own attempt to finish what's missing and common.

Honestly, I think the easiest way would be to write an automation script create leaving a min of 2px spacing and min of 2–4px width of elements for the items other than the core attention. From the rendered output we could compute the path data for each icon. This obviously would just be mocking the examples shown in examples I posted ⤴ above but a lot of them could be greatly simplified.

[zgover]

Also see their working docs for these:

• DevTools CSS flexbox tooling v1 docs (v2 aren't public yet)
• Flexbox Tooling Research
• Mentioned online tool to visualize

[SintijaPotaicuka]

You don't need permission, anyone is able to contribute! Go for it!

I was unsure what to do, as I could not check one of the boxes when contributing an icon.

[SintijaPotaicuka]

My feeling is that google chrome icons do not fit in the style with MDI - they are using rounded while MDI seems to focus on sharp.

If someone can write a script to auto-generate, I would suggest using fewer rows/columns so they are easier to read as in the example - 2nd row.