Flexbox Support

BradK
22 Posts
BradK posted this 16 July 2020
Wishlist

I understand that Nicepage tries to shield the user from CSS and implements CSS behind the scenes. However, Flexbox is so powerful and so easy to use that I'd like to see that implemented in Nicepage, or at least implement settings based on Flexbox.

If you add multiple elements to a Nicepage block or container, the responsive layout is unpredictable, with elements often overlapping one another at smaller screen sizes. You end up having to manually edit the layout in each of the responsive views. This is not a professional approach to web design.

Instead, I'd like to have the option to specify how the elements will be arranged within a container, based on Flexbox settings. For example, the flex- direction attribute specifies whether elements will flow horizontally or vertically. flex-wrap specifies whether or not elements will automatically wrap along the cross-axis. justify-content and align-items are extremely useful for determining whether elements will be spaced evenly along the axis, centered, justified left or right, etc... All of these flexbox attributes and others make responsive design easy, yet they're only partially implemented in Nicepage. Currently, in Nicepage, we only have the option to center, left justify, or right justify elements.

We need corresponding settings for flex-direction, flex-wrap, justify-content (space-between and space-around), align-items, align-content (space-around, stretch), etc...

I understand that Nicepage tries to shield the user from CSS and implements CSS behind the scenes. However, Flexbox is so powerful and so easy to use that I'd like to see that implemented in Nicepage, or at least implement settings based on Flexbox. If you add multiple elements to a Nicepage block or container, the responsive layout is unpredictable, with elements often overlapping one another at smaller screen sizes. You end up having to manually edit the layout in each of the responsive views. This is not a professional approach to web design. Instead, I'd like to have the option to specify how the elements will be arranged within a container, based on Flexbox settings. For example, the flex- direction attribute specifies whether elements will flow horizontally or vertically. flex-wrap specifies whether or not elements will automatically wrap along the cross-axis. justify-content and align-items are extremely useful for determining whether elements will be spaced evenly along the axis, centered, justified left or right, etc... All of these flexbox attributes and others make responsive design easy, yet they're only partially implemented in Nicepage. Currently, in Nicepage, we only have the option to center, left justify, or right justify elements. We need corresponding settings for flex-direction, flex-wrap, justify-content (space-between and space-around), align-items, align-content (space-around, stretch), etc...

Last edited 16 July 2020 by BradK

Vote to pay developers attention to this features or issue.
4 Replies
Order By: Standard | Newest
charlie61
103 Posts
charlie61 posted this 16 July 2020

Awesome point!

Awesome point!
Support Team
Support Team posted this 16 July 2020

Hi,

Thank you for your comments.
But Nicepage uses flexbox. For example, it is used for Grid and alignment of controls inside Grid.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, Thank you for your comments. But Nicepage uses flexbox. For example, it is used for Grid and alignment of controls inside Grid. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
BradK
22 Posts
BradK posted this 16 July 2020

I understand that it uses Flexbox, but it doesn't support all the Flexbox features. For example, if you add multiple elements to a grid cell, there's no way to control how those elements will flow in responsive views. Suppose I want to add two buttons, side-by-side and centered in a grid cell. With Nicepage, you can place the buttons next to each other, but in the responsive view, they will wrap and they will not be center-aligned, so you have to go into each responsive view and edit the layout manually.

With Flexbox, you could just specify:

flex-wrap: wrap;
align-items: center;

This would cause the buttons to be side-by-side initially, then automatically wrap in a responsive view and be horizontally centered.

Also, since you can't nest grids, it's not possible to create complex layouts that work properly in responsive views without editing each responsive view manually. I'm suggesting that the Nicepage Group element should have the option to enable Flexbox controls. In the above example, we'd add a Group element to the grid cell, then in the Group element, we'd be able to set its Flexbox attributes, like Wrap, Align-Items, etc...

Currently, the Group element creates unpredictable layouts in responsive views. If you added Flexbox attribute controls to the Group element, we'd be able to specify the exact desired behavior. Obviously once the user enables these controls, he would no longer be able to control the layout manually within the Group control. That's perfectly fine. The Group control could have two modes, automatic (Flexbox) or manual (the current approach). If you set the mode to automatic and add multiple elements to the Group, Nicepage would control the layout automatically, according to the Flexbox attributes specified by the user. The user would no longer be able to manually position elements within the group.

I understand that it uses Flexbox, but it doesn't support all the Flexbox features. For example, if you add multiple elements to a grid cell, there's no way to control how those elements will flow in responsive views. Suppose I want to add two buttons, side-by-side and centered in a grid cell. With Nicepage, you can place the buttons next to each other, but in the responsive view, they will wrap and they will not be center-aligned, so you have to go into each responsive view and edit the layout manually. With Flexbox, you could just specify: flex-wrap: wrap; align-items: center; This would cause the buttons to be side-by-side initially, then automatically wrap in a responsive view and be horizontally centered. Also, since you can't nest grids, it's not possible to create complex layouts that work properly in responsive views without editing each responsive view manually. I'm suggesting that the Nicepage Group element should have the option to enable Flexbox controls. In the above example, we'd add a Group element to the grid cell, then in the Group element, we'd be able to set its Flexbox attributes, like Wrap, Align-Items, etc... Currently, the Group element creates unpredictable layouts in responsive views. If you added Flexbox attribute controls to the Group element, we'd be able to specify the exact desired behavior. Obviously once the user enables these controls, he would no longer be able to control the layout manually within the Group control. That's perfectly fine. The Group control could have two modes, automatic (Flexbox) or manual (the current approach). If you set the mode to automatic and add multiple elements to the Group, Nicepage would control the layout automatically, according to the Flexbox attributes specified by the user. The user would no longer be able to manually position elements within the group.

Last edited 16 July 2020 by BradK

dacch.992
3 Posts
dacch.992 posted this 08 July 2021

I agree as well felx boxes give an amazin posibility for interactive and fastest accebility to clients

I agree as well felx boxes give an amazin posibility for interactive and fastest accebility to clients
You must log in or register to leave comments

Company
Product
Themes & Templates
Nicepage
Web Design