Tutorial: Flexible Layout with the Flex Component

We’ve been working our way through the manual and updating it with new videos to help everyone get to grips with Elements. And today, we published a video about the basics of using the Flex Component.

The Flex Element is based on the Flexbox CSS module that provides a flexible way to distribute space among items within a container. It is designed for one-dimensional layouts, such as arranging elements in a single row or column. With Flexbox, you can easily create responsive and dynamic layouts that adapt to different screen sizes and orientations.

If you’re not too familiar with Flex, I’d encourage you to watch this video to learn the basics. Once you know Flex, it’ll become one of your most used components in Elements :blush:

Have fun, and let us know if you have any questions :slight_smile:

4 Likes

Great stuff … more videos about other components, please. I use padding a lot, this is better.

Nice, starting to show what flex is about

Thanks @dan, I really like these style of videos. It helps me understand the thought process you guys had when building the component and how it should be used. This helps me build better and more efficient designs.

The Flex component really is amazing, it is incredible what can be accomplished with it. I agree that it has fast become my most utilized component. I could not live without it now.

1 Like

You’re welcome :hugs: I’m slowly working my way through the components and features. I try to do a new video for the manual every week-ish.

I know @ben plans to do some more advanced tutorials for those that want to take things even further. Exciting times ahead!

Here are the other ones I’ve done over the past week (with plenty more on the way):

1 Like