The flexbox container of the most used widget. The flexbox is the fundamental base of modern web layout. I am not going to the technical details, because there are quite a lot of excellent tutorials online, Google to find them. Here I will show you examples of how I used the flexbox container.Â
Don't worry about nesting too many containers
Put one container in another container to nest them for the layout, for whatever purpose. You may start questioning "Am I doing right?" after you nest several containers. The answer is YES, nest as many containers as needed.
For an online shop owner, don't think like a developer, forget all the technical rules you know, and forget all the test reports you get; the only thing that matters is whether your customers would like it.
Flexbox layout VS Sections & Columns layout
The Sections & Columns layout is deprecated; what it can do is limited, don't use it anymore.
One major difference is that you've to set a width for every column in the Sections & columns layout. In the flexbox layout, you barely need to set a width for any container.Â
How to put one item on one side, and the other on the other side.
In the sections & columns layout, you would need to add two columns, put one item in each column, and set the second column's alignment to the right, like this.
It's way easier to achieve the same result, put two items in the same container, set its Justify content to Space between.
How to put some items on one side, the rest on the other side.
Two ways to achieve that.
- Add one container, set its Direction to Row and Justify content to Space between, and then add two child containers, set their Widths to auto, and add widgets to the child containers. -Â Recommended
- Another way is to put all widgets in the same container, add a Spacer in the middle to separate them, and set the Spacer's Size to Grow. Set the divider's Space to 0 if needed, and hide the spacer on mobile when it's not needed.
Sort elements
Elements can be sorted by using the Order setting, they don't have to stay at the order when they are added. Check the example below on different devices.
Create a full-height panel with the middle part scrollable.
If it's empty, then add some products to it.
Check the first image, that's the structure. Here are some key points.
- Set the parent container's height to 100vh to make the container full-height.
- Set the Scrollable container's Overflow to Auto to make it have a scrollbar, set its Size to 1 1 0 to make it take all empty space to push the footer part down to the bottom.
