{"id":27548,"date":"2023-05-25T10:03:17","date_gmt":"2023-05-25T15:03:17","guid":{"rendered":"https:\/\/wpstackable.com\/?p=27548"},"modified":"2023-05-25T10:03:30","modified_gmt":"2023-05-25T15:03:30","slug":"introducing-stackable-flexbox-controls","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/introducing-stackable-flexbox-controls\/","title":{"rendered":"Introducing: Stackable Flexbox Controls"},"content":{"rendered":"\n<p data-block-type=\"core\">Stackable is the ultimate toolkit that turns the WordPress Block Editor (Gutenberg) into a page builder. It\u2019s packed with a lot of features and design options that make designing professional websites much easier. In our latest release, we\u2019ve added a new feature that gives users the ability to create complex layouts without the hassle \u2014 Flexbox. This feature enables designers to create responsive layouts with ease. This article will walk you through the new Flexbox controls in Stackable.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">What is Flexbox?<\/h2>\n\n\n\n<p data-block-type=\"core\">Flexbox, short for the Flexible Box Layout Module, is a CSS3 web layout model. It\u2019s used for the arrangement, alignment, and distribution of space among items in a container. Flexbox is widely used due to its ability to create simplified layouts and it\u2019s especially useful in making layout designs responsive.<\/p>\n\n\n\n<p data-block-type=\"core\">Flexbox in CSS usually looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f6f6f6\" data-block-type=\"core\"><code>.flex-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px;\n    border: 1px solid #ccc;\n    background-color: #f0f0f0;\n}\n\n.flex-item {\n    flex: 1;\n    padding: 10px;\n    margin: 5px;\n    text-align: center;\n    border: 1px solid #ccc;\n    background-color: #fff;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Flexbox in Stackable<\/h2>\n\n\n\n<p data-block-type=\"core\">The WordPress Block Editor has very limited options for the arrangement of blocks. With Stackable and the addition of flexbox controls, users can now take advantage of this layout module without writing a single line of code.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6.png\" alt=\"\" class=\"wp-image-27428\" width=\"414\" height=\"382\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6.png 828w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6-300x277.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-6-768x709.png 768w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">Stackable\u2019s flexbox controls will be found in the Layout tab of the Inspector and it\u2019s available for most blocks, mainly the Columns block and the Inner Columns block. Here are the controls to create flexible box layouts with Stackable:<\/p>\n\n\n\n<p data-block-type=\"core\"><strong>Column Justify<\/strong>: This property sets the horizontal position and spacing of the inner columns.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-design-5.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong><strong>Column Alignment<\/strong><\/strong>: This property sets the vertical position of the inner columns relative to the columns block.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-design-6.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>Content Vertical Align<\/strong>: This property sets the placement of the column container to top, center or bottom. Available when the min. block height is set to higher than default. <\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-design-8.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>Inner Block Justify<\/strong>: This property sets the horizontal position and spacing of the inner columns.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-design-10.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>Inner Block Alignment<\/strong>: This property sets the vertical position of the inner columns relative to the columns block.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay controls loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Untitled-design-11.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Why Use Flexbox in Stackable?<\/h2>\n\n\n\n<p data-block-type=\"core\">Flexbox provides a more efficient method of creating layouts. Its dynamic nature makes it perfect for creating designs that adjust responsively, which is essential in this day and age. With Stackable\u2019s user-friendly <a href=\"https:\/\/wpstackable.com\/blog\/introducing-new-stackable-ui\/\">interface<\/a>, you can make the most out of flexbox without having to write any code.<\/p>\n\n\n\n<p data-block-type=\"core\">Significantly enhance your designs and create layouts that are not just visually appealing but also responsive. Whether you are a beginner, web designer or an experienced developer, Stackable\u2019s flexbox is a feature that definitely upgrades your web design toolkit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stackable is the ultimate toolkit that turns the WordPress Block Editor (Gutenberg) into a page builder. It\u2019s packed with a lot of features and design options that make designing professional websites much easier. In our latest release, we\u2019ve added a new feature that gives users the ability to create complex layouts without the hassle \u2014 &hellip; <a href=\"https:\/\/wpstackable.com\/blog\/introducing-stackable-flexbox-controls\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Introducing: Stackable Flexbox Controls<\/span><\/a><\/p>\n","protected":false},"author":18,"featured_media":27549,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-27548","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-updates"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/05\/Introducing_-Stackable-Flexbox-Controls.jpg",2400,1248,false]},"post_excerpt_stackable_v2":"<p>Stackable is the ultimate toolkit that turns the WordPress Block Editor (Gutenberg) into a page builder. It\u2019s packed with a lot of features and design options that make designing professional websites much easier. In our latest release, we\u2019ve added a new feature that gives users the ability to create complex layouts without the hassle \u2014 Flexbox. This feature enables designers to create responsive layouts with ease. This article will walk you through the new Flexbox controls in Stackable. What is Flexbox? Flexbox, short for the Flexible Box Layout Module, is a CSS3 web layout model. It\u2019s used for the arrangement,&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Alexandra Yap","url":"https:\/\/wpstackable.com\/blog\/author\/alex\/"},"comments_num_v2":"0 comments","acf":[],"modified_by":"Alexandra Yap","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=27548"}],"version-history":[{"count":2,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27548\/revisions"}],"predecessor-version":[{"id":27556,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/27548\/revisions\/27556"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/27549"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=27548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=27548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=27548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}