{"id":16618,"date":"2026-01-16T19:53:12","date_gmt":"2026-01-16T19:53:12","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=16618"},"modified":"2026-04-22T16:39:38","modified_gmt":"2026-04-22T16:39:38","password":"","slug":"flexbox-layouts-with-section-blocks","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/flexbox-layouts-with-section-blocks\/","title":{"rendered":"How to Use Flexbox Layouts with Section Blocks"},"content":{"rendered":"\n<p>The <strong><a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/section-block\/\">Section Block<\/a><\/strong> in Kadence Blocks includes Flexbox controls by default. These controls make it possible to build layouts where each piece of content behaves independently. This is especially helpful for cards, columns, or expandable content that should not affect nearby items.<br><br>Section Block using Flexbox sizes itself based on its own content. This allows more flexibility with alignment, spacing, and wrapping, both initially and responsively, across all device types.<\/p>\n\n\n<style>.kb-image16618_f12fcd-29.kb-image-is-ratio-size, .kb-image16618_f12fcd-29 .kb-image-is-ratio-size{max-width:500px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_f12fcd-29.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_f12fcd-29 .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_f12fcd-29 figure{max-width:500px;}.kb-image16618_f12fcd-29 .image-is-svg, .kb-image16618_f12fcd-29 .image-is-svg img{width:100%;}.kb-image16618_f12fcd-29 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_f12fcd-29\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2078\" height=\"1230\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo.jpg\" alt=\"Section Flex Demo\" class=\"kb-img wp-image-16625\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo.jpg 2078w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo-300x178.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo-1024x606.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo-768x455.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo-1536x909.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo-2048x1212.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Section-Flex-Demo-360x213.jpg 360w\" sizes=\"auto, (max-width: 2078px) 100vw, 2078px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_648648-f2, .wp-block-kadence-advancedheading.kt-adv-heading16618_648648-f2[data-kb-block=\"kb-adv-heading16618_648648-f2\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_648648-f2 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_648648-f2[data-kb-block=\"kb-adv-heading16618_648648-f2\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_648648-f2 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_648648-f2[data-kb-block=\"kb-adv-heading16618_648648-f2\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_648648-f2 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_648648-f2\">This guide explains:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When to use Flexbox in the Section Block instead of a Row Layout.<\/li>\n\n\n\n<li>How the Section Block Flex settings work.<\/li>\n\n\n\n<li>Key differences between Row Layout and Section Flex behavior.<\/li>\n<\/ul>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id16618_93058e-27 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id16618_93058e-27 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id16618_93058e-27 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id16618_93058e-27 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n\n<h2 class=\"wp-block-heading\"><strong>Before You Begin<\/strong><\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_d9cad1-d4, .wp-block-kadence-advancedheading.kt-adv-heading16618_d9cad1-d4[data-kb-block=\"kb-adv-heading16618_d9cad1-d4\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_d9cad1-d4 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_d9cad1-d4[data-kb-block=\"kb-adv-heading16618_d9cad1-d4\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_d9cad1-d4 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_d9cad1-d4[data-kb-block=\"kb-adv-heading16618_d9cad1-d4\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_d9cad1-d4 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_d9cad1-d4\">Before using Flexbox layouts in the Section Block, confirm the following:<\/p>\n\n\n\n<ul style=\"margin-bottom:var(--wp--preset--spacing--20)\" class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/installing-kadence-blocks\/\"><strong>Kadence<\/strong> <strong>Blocks<\/strong><\/a> is installed and active on the website.<\/li>\n\n\n\n<li>A <strong>Section Block<\/strong> is added to the page.<\/li>\n<\/ul>\n\n\n\n<p>Flexbox controls are available on the Section Block by default under the <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/section-block\/#general-settings\">Block Settings<\/a>. The layout behavior changes based on the Flex settings that are applied.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When to Use Section Block Flexbox<\/strong><\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_b9b598-ce, .wp-block-kadence-advancedheading.kt-adv-heading16618_b9b598-ce[data-kb-block=\"kb-adv-heading16618_b9b598-ce\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_b9b598-ce mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_b9b598-ce[data-kb-block=\"kb-adv-heading16618_b9b598-ce\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_b9b598-ce img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_b9b598-ce[data-kb-block=\"kb-adv-heading16618_b9b598-ce\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_b9b598-ce wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_b9b598-ce\">Flexbox in the Section Block is a good choice when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Columns should behave independently.<\/li>\n\n\n\n<li>The content of neighboring content should not affect nearby items.<\/li>\n\n\n\n<li>Card layouts include dynamic or expandable content.<\/li>\n\n\n\n<li>Layouts need precise control over alignment, spacing, or wrapping.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Understanding Section Block Flex Settings<\/strong><\/h2>\n\n\n\n<p>Flex settings control how child blocks inside a Section Block are arranged. These options are available in the Section Block settings panel and can be adjusted at any time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flex Direction<\/strong><\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_4a1809-64, .wp-block-kadence-advancedheading.kt-adv-heading16618_4a1809-64[data-kb-block=\"kb-adv-heading16618_4a1809-64\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_4a1809-64 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_4a1809-64[data-kb-block=\"kb-adv-heading16618_4a1809-64\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_4a1809-64 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_4a1809-64[data-kb-block=\"kb-adv-heading16618_4a1809-64\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_4a1809-64 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_4a1809-64\"><strong>Flex Direction<\/strong> determines how child blocks are laid out.<br><br>Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vertical<\/strong>. Items stack from top to bottom. This is the default.<\/li>\n\n\n\n<li><strong>Horizontal<\/strong>. Items sit side by side.<\/li>\n\n\n\n<li><strong>Vertical Reverse<\/strong>. Items stack from bottom to top.<\/li>\n\n\n\n<li><strong>Horizontal Reverse<\/strong>. Items align side by side in reverse order.<\/li>\n<\/ul>\n\n\n<style>.kb-image16618_07a491-d4.kb-image-is-ratio-size, .kb-image16618_07a491-d4 .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_07a491-d4.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_07a491-d4 .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_07a491-d4 figure{max-width:250px;}.kb-image16618_07a491-d4 .image-is-svg, .kb-image16618_07a491-d4 .image-is-svg img{width:100%;}.kb-image16618_07a491-d4 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_07a491-d4\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"521\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-5.png\" alt=\"\" class=\"kb-img wp-image-16626\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-5.png 548w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-5-300x285.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-5-360x342.png 360w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure><\/div>\n\n\n<style>.kb-image16618_db69b6-a4.kb-image-is-ratio-size, .kb-image16618_db69b6-a4 .kb-image-is-ratio-size{max-width:216px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_db69b6-a4.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_db69b6-a4 .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_db69b6-a4 figure{max-width:216px;}.kb-image16618_db69b6-a4 .image-is-svg, .kb-image16618_db69b6-a4 .image-is-svg img{width:100%;}.kb-image16618_db69b6-a4 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_db69b6-a4\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"165\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2.png\" alt=\"Flex Basis\" class=\"kb-img wp-image-16622\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2.png 485w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2-300x102.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2-360x122.png 360w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_1d71a1-ae, .wp-block-kadence-advancedheading.kt-adv-heading16618_1d71a1-ae[data-kb-block=\"kb-adv-heading16618_1d71a1-ae\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_1d71a1-ae mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_1d71a1-ae[data-kb-block=\"kb-adv-heading16618_1d71a1-ae\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_1d71a1-ae img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_1d71a1-ae[data-kb-block=\"kb-adv-heading16618_1d71a1-ae\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_1d71a1-ae wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading16618_1d71a1-ae\"><strong>Tip:<\/strong> The <span style=\"text-decoration: underline\">horizontal direction<\/span> is most commonly used for card layouts and columns.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Alignment<\/strong><\/h3>\n\n\n\n<p>This setting controls how items are aligned <strong>horizontally within the Section width<\/strong>.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_d619a1-f4, .wp-block-kadence-advancedheading.kt-adv-heading16618_d619a1-f4[data-kb-block=\"kb-adv-heading16618_d619a1-f4\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_d619a1-f4 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_d619a1-f4[data-kb-block=\"kb-adv-heading16618_d619a1-f4\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_d619a1-f4 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_d619a1-f4[data-kb-block=\"kb-adv-heading16618_d619a1-f4\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_d619a1-f4 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_d619a1-f4\">Options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Start<\/strong> \u2013 Align items to the left side of the Section.<\/li>\n\n\n\n<li><strong>Center<\/strong> \u2013 Center items horizontally within the Section.<\/li>\n\n\n\n<li><strong>End<\/strong> \u2013 Align items to the right side of the Section.<\/li>\n\n\n\n<li><strong>Stretch<\/strong> \u2013 Stretch items to fill the available horizontal space (when supported).<\/li>\n<\/ul>\n\n\n<style>.kb-image16618_932874-b5.kb-image-is-ratio-size, .kb-image16618_932874-b5 .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_932874-b5.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_932874-b5 .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_932874-b5 figure{max-width:250px;}.kb-image16618_932874-b5 .image-is-svg, .kb-image16618_932874-b5 .image-is-svg img{width:100%;}.kb-image16618_932874-b5 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_932874-b5\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"206\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image.png\" alt=\"Flex Alignment\" class=\"kb-img wp-image-16619\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image.png 538w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-300x115.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-360x138.png 360w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Vertical Alignment<\/strong><\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_134211-40, .wp-block-kadence-advancedheading.kt-adv-heading16618_134211-40[data-kb-block=\"kb-adv-heading16618_134211-40\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_134211-40 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_134211-40[data-kb-block=\"kb-adv-heading16618_134211-40\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_134211-40 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_134211-40[data-kb-block=\"kb-adv-heading16618_134211-40\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_134211-40 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_134211-40\">This setting controls how items are aligned <strong>vertically within the Section height<\/strong>.<br><br>Options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Top<\/strong> \u2013 Align items to the top of the Section.<\/li>\n\n\n\n<li><strong>Middle<\/strong> \u2013 Center items vertically within the Section.<\/li>\n\n\n\n<li><strong>Bottom<\/strong> \u2013 Align items to the bottom of the Section.<\/li>\n\n\n\n<li><strong>Space Between<\/strong> \u2013 Place the first and last items at the top and bottom, with space distributed between items.<\/li>\n\n\n\n<li><strong>Space Around<\/strong> \u2013 Distribute items with space above and below each item.<\/li>\n\n\n\n<li><strong>Space Evenly<\/strong> \u2013 Distribute items so the spacing between items and the Section edges is equal.<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Vertical<\/strong> <strong>Alignment<\/strong> changes based on the Flex Direction. For horizontal layouts, this setting controls left-to-right spacing.<\/p>\n\n\n<style>.kb-image16618_2d771d-25.kb-image-is-ratio-size, .kb-image16618_2d771d-25 .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_2d771d-25.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_2d771d-25 .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_2d771d-25 figure{max-width:250px;}.kb-image16618_2d771d-25 .image-is-svg, .kb-image16618_2d771d-25 .image-is-svg img{width:100%;}.kb-image16618_2d771d-25 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_2d771d-25\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"187\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-1.png\" alt=\"Vertical Alignment\" class=\"kb-img wp-image-16620\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-1.png 548w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-1-300x102.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-1-360x123.png 360w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gaps<\/strong><\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_5015db-67, .wp-block-kadence-advancedheading.kt-adv-heading16618_5015db-67[data-kb-block=\"kb-adv-heading16618_5015db-67\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_5015db-67 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_5015db-67[data-kb-block=\"kb-adv-heading16618_5015db-67\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_5015db-67 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_5015db-67[data-kb-block=\"kb-adv-heading16618_5015db-67\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_5015db-67 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_5015db-67\">Gaps control spacing between child blocks and replace the need for margins. You can use a <strong>Vertical<\/strong> and\/or <strong>Horizontal<\/strong> <strong>Gap<\/strong>.<br><br>Available gap options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vertical Gap<\/strong>. Available for vertical layouts<\/li>\n\n\n\n<li><strong>Horizontal Gap<\/strong>. Appears when Flex Direction is set to Horizontal or Horizontal Reverse<\/li>\n<\/ul>\n\n\n<style>.kb-image16618_18161d-fe.kb-image-is-ratio-size, .kb-image16618_18161d-fe .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_18161d-fe.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_18161d-fe .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_18161d-fe figure{max-width:250px;}.kb-image16618_18161d-fe .image-is-svg, .kb-image16618_18161d-fe .image-is-svg img{width:100%;}.kb-image16618_18161d-fe .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_18161d-fe\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"487\" height=\"590\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-3-e1768592505565.png\" alt=\"Section Gaps\" class=\"kb-img wp-image-16623\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-3-e1768592505565.png 487w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-3-e1768592505565-248x300.png 248w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-3-e1768592505565-360x436.png 360w\" sizes=\"auto, (max-width: 487px) 100vw, 487px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_40c05b-fc, .wp-block-kadence-advancedheading.kt-adv-heading16618_40c05b-fc[data-kb-block=\"kb-adv-heading16618_40c05b-fc\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_40c05b-fc mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_40c05b-fc[data-kb-block=\"kb-adv-heading16618_40c05b-fc\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_40c05b-fc img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_40c05b-fc[data-kb-block=\"kb-adv-heading16618_40c05b-fc\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_40c05b-fc wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading16618_40c05b-fc\"><strong>Tip:<\/strong> Using gaps instead of margins keeps spacing consistent and responsive across screen sizes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Advanced Flex Options for Horizontal Layouts<\/strong><\/h2>\n\n\n\n<p>Additional options appear when <strong>Flex Direction<\/strong> is set to <strong>Horizontal or Horizontal Reverse.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Wrap Content<\/strong><\/h3>\n\n\n\n<p><strong>Wrap Content<\/strong> controls how items behave when there is not enough horizontal space available.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_e287f8-d2, .wp-block-kadence-advancedheading.kt-adv-heading16618_e287f8-d2[data-kb-block=\"kb-adv-heading16618_e287f8-d2\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_e287f8-d2 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_e287f8-d2[data-kb-block=\"kb-adv-heading16618_e287f8-d2\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_e287f8-d2 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_e287f8-d2[data-kb-block=\"kb-adv-heading16618_e287f8-d2\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_e287f8-d2 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_e287f8-d2\">Options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Inherit<\/strong> &#8211; Go off of the default behavior.<\/li>\n\n\n\n<li><strong>No Wrap<\/strong> &#8211; Do not allow items to wrap.<\/li>\n\n\n\n<li><strong>Wrap<\/strong> &#8211; Allow items to wrap.<\/li>\n\n\n\n<li><strong>Wrap Reverse<\/strong> &#8211; Allow items to wrap, and when wrapping occurs, reverse the order.<\/li>\n<\/ul>\n\n\n\n<p>This setting is especially helpful for responsive card grids that adjust naturally on smaller screens.<\/p>\n\n\n<style>.kb-image16618_123f22-9b.kb-image-is-ratio-size, .kb-image16618_123f22-9b .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_123f22-9b.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_123f22-9b .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_123f22-9b figure{max-width:250px;}.kb-image16618_123f22-9b .image-is-svg, .kb-image16618_123f22-9b .image-is-svg img{width:100%;}.kb-image16618_123f22-9b .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_123f22-9b\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"345\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-4.png\" alt=\"Wrap Content\" class=\"kb-img wp-image-16624\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-4.png 556w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-4-300x186.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-4-360x223.png 360w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Flex Basis<\/strong><\/h3>\n\n\n\n<p><strong>Flex Basis<\/strong> defines the starting width of each child block before Flexbox adjusts the layout.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_e48d83-f9, .wp-block-kadence-advancedheading.kt-adv-heading16618_e48d83-f9[data-kb-block=\"kb-adv-heading16618_e48d83-f9\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_e48d83-f9 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_e48d83-f9[data-kb-block=\"kb-adv-heading16618_e48d83-f9\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_e48d83-f9 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_e48d83-f9[data-kb-block=\"kb-adv-heading16618_e48d83-f9\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_e48d83-f9 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_e48d83-f9\">Common uses include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Equal-width cards<\/li>\n\n\n\n<li>Controlled column sizing<\/li>\n\n\n\n<li>Responsive layouts that adjust by screen size<\/li>\n<\/ul>\n\n\n\n<p>Example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setting Flex Basis to <strong>50%<\/strong> creates two equal-width columns.<\/li>\n\n\n\n<li>Setting a Flex Basis of <strong>250px<\/strong> will make each section use a <strong>250px<\/strong> width. If there isn&#8217;t enough width available, the content will wrap depending on the wrap block setting.<\/li>\n<\/ul>\n\n\n<style>.kb-image16618_498927-2f.kb-image-is-ratio-size, .kb-image16618_498927-2f .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_498927-2f.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_498927-2f .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_498927-2f figure{max-width:250px;}.kb-image16618_498927-2f .image-is-svg, .kb-image16618_498927-2f .image-is-svg img{width:100%;}.kb-image16618_498927-2f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_498927-2f\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"165\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2.png\" alt=\"Flex Basis\" class=\"kb-img wp-image-16621\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2.png 485w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2-300x102.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/image-2-360x122.png 360w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Flex Grow<\/strong><\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16618_d48adf-3d, .wp-block-kadence-advancedheading.kt-adv-heading16618_d48adf-3d[data-kb-block=\"kb-adv-heading16618_d48adf-3d\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16618_d48adf-3d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16618_d48adf-3d[data-kb-block=\"kb-adv-heading16618_d48adf-3d\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16618_d48adf-3d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16618_d48adf-3d[data-kb-block=\"kb-adv-heading16618_d48adf-3d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16618_d48adf-3d wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16618_d48adf-3d\">Use the <strong>Flex Grow<\/strong> setting to control how a Section <strong>expands to fill available space<\/strong> within a flex layout.<br><br>The <strong>Flex Grow<\/strong> Block setting can be found at:<br><strong>Section Block Settings \u2192 Advanced Tab \u2192 Structure Settings<\/strong><br><br>Flex Grow works best when <strong>multiple Sections are placed inside a parent Section<\/strong>. It determines how the remaining space is distributed between sibling Sections.<br><br>For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Section with <strong>Flex Grow: 1<\/strong> will take up an equal share of available space.<\/li>\n\n\n\n<li>A Section with <strong>Flex Grow: 2<\/strong> will take up twice as much space as a Section with Flex Grow set to 1.<\/li>\n\n\n\n<li>A Section with <strong>Flex Grow: 0<\/strong> will not grow beyond its base size.<\/li>\n<\/ul>\n\n\n<style>.kb-image16618_d808ad-7a.kb-image-is-ratio-size, .kb-image16618_d808ad-7a .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_d808ad-7a.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16618_d808ad-7a .kb-image-is-ratio-size{align-self:unset;}.kb-image16618_d808ad-7a figure{max-width:200px;}.kb-image16618_d808ad-7a .image-is-svg, .kb-image16618_d808ad-7a .image-is-svg img{width:100%;}.kb-image16618_d808ad-7a .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16618_d808ad-7a\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"427\" height=\"1024\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Flex-Grow-427x1024.jpg\" alt=\"Flex Grow\" class=\"kb-img wp-image-16627\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Flex-Grow-427x1024.jpg 427w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Flex-Grow-125x300.jpg 125w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Flex-Grow-214x512.jpg 214w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2026\/01\/Flex-Grow.jpg 538w\" sizes=\"auto, (max-width: 427px) 100vw, 427px\" \/><\/figure><\/div>\n\n\n\n<p>Flex Grow is especially useful for creating <strong>flexible, responsive layouts<\/strong> where Sections need to adapt dynamically to the available width or height.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Section Block vs Row Layout Block<\/strong><\/h2>\n\n\n\n<p>The <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/row-layout-block\/\">Row Layout Block<\/a> already uses <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/section-block\/\">Section Blocks<\/a> internally. In many cases, you can use a Row Layout Block on its own to achieve most layouts. However, Section Blocks are more versatile and can also be used independently or in combination with Row Layout Blocks to provide greater control over complex designs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Row Layout Block<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Grid-based rows and columns.<\/li>\n\n\n\n<li>All columns in a row share the same height.<\/li>\n\n\n\n<li>Expanding content affects the entire row.<\/li>\n\n\n\n<li>Offers using the <em>Theme Content Max Width<\/em> for limiting the content width.<\/li>\n\n\n\n<li>Best for structured, symmetrical layouts.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Section Block with Flexbox<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Content-driven sizing<\/li>\n\n\n\n<li>Columns behave independently<\/li>\n\n\n\n<li>Flexible alignment and spacing<\/li>\n\n\n\n<li>Ideal for dynamic or expandable content<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Section Block in Kadence Blocks includes Flexbox controls by default. These controls make it possible to build layouts where each piece of content behaves independently. This is especially helpful for cards, columns, or expandable content that should not affect nearby items. Section Block using Flexbox sizes itself based on its own content. This allows&#8230;<\/p>\n","protected":false},"author":148263,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-16618","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":919,"total_views":"1335","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/16618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=16618"}],"version-history":[{"count":1,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/16618\/revisions"}],"predecessor-version":[{"id":16628,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/16618\/revisions\/16628"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=16618"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=16618"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=16618"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=16618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}