tips
教程需要,本站采用的国外服务器,国内访问较慢,感谢耐心等待。

Elementor怎么开启和关闭Flexbox Container功能

Flexbox Container是css3的弹性盒子属性,Elementor在3.6版本引入了Flexbox Container功能不过并没有默认开启,如果你想尝试一下使用Flexbox Container布局来设计网站,那么可以通过下面的方法在Elementor设置里面手动打开该功能。

如何开启和关闭Flexbox Container选项

在Elementor的设置里面,切换到实验选项卡,然后找到Flexbox Container选项,设置为启用,然后保存就可以在新的设计里面看到 Flexbox Container element元素了。

elementor开启Flexbox

开启之后,Elementor设计页面的内部段(Inner Section)就自动切换到了Container元素。

如果你想恢复成Inner Section元素的话,只需要在设置里面再次关闭Flexbox Container选项即可。

Flexbox Container简单介绍

Flex容器(Flex Container)是 CSS3 的一种新的布局模式,它是现代Web布局的主流方式之一,在响应式设计上更加的智能。

切换到Container元素后,可以从Elementor的元素设置里面看到更加灵活的布局选项,如下图:

Flex项目(Flex Items)布局设置

Flex布局分为两个块,Flex容器(Flex Container)和Flex项目(Flex Items),弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

通过上图我们可以看到,Container的布局比之前使用的段在容器布局方向上更加灵活。

最后,你是否需要开启Flex Container功能?

Flex Container虽然看上去很强大,不过考虑到Elementor才推出测试版,建议等到Elementor推出正式版Flex Container功能后再切换到现有网站上使用,而如果你是一个全新的网站,那么也可以直接切换到Flex Container上面使用。

但是,如果你考虑使用第三方的Elementor扩展插件,可能会存在对Flex Container布局不兼容的情况,所以尽量选择Elementor官方自带的元素去设计网页。

随便看看

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注