Flexbox Container是css3的弹性盒子属性,Elementor在3.6版本引入了Flexbox Container功能不过并没有默认开启,如果你想尝试一下使用Flexbox Container布局来设计网站,那么可以通过下面的方法在Elementor设置里面手动打开该功能。
如何开启和关闭Flexbox Container选项
在Elementor的设置里面,切换到实验选项卡,然后找到Flexbox Container选项,设置为启用,然后保存就可以在新的设计里面看到 Flexbox Container element元素了。
开启之后,Elementor设计页面的内部段(Inner Section)就自动切换到了Container元素。
如果你想恢复成Inner Section元素的话,只需要在设置里面再次关闭Flexbox Container选项即可。
Flexbox Container简单介绍
Flex容器(Flex Container)是 CSS3 的一种新的布局模式,它是现代Web布局的主流方式之一,在响应式设计上更加的智能。
切换到Container元素后,可以从Elementor的元素设置里面看到更加灵活的布局选项,如下图:
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官方自带的元素去设计网页。