- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- Getting Started With Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Importing Single Pages, Templates, and Block Patterns In Spectra
- How to Enable or Disable the Design Library Button
- Spectra – Copy and Paste Style
- Spectra – Container Flex property
- Spectra – Default Content Width
- Spectra – Blocks Editor Spacing
- Spectra – Collapse Panels
- Spectra – Responsive Conditions
- Spectra Pro Dynamic Content Extension
- Site Visibility
- Clearing Cache with Spectra Actions
- Quick Action Bar
- Add Multiple Instagram Accounts in Spectra
- Getting Started with Grid Builder
- Move the Title Bar to Top
- Resolving Layout Conflicts with Spectra Containers After Astra Update
- How to Register High-Privileged Users on Your Website
- Additional User Roles to Access AI Assistant
- Spectra Database Update Instructions (Version 2.0.0 and Below)
- Frequently Asked Questions – VIP Priority Support
- Whitelist an Email Address
- Installing and Importing Starter Templates
- Getting Started With Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- Rollback To Previous Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to Process Refund Requests?
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How To Reset Global Default Styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
Spectra – Container Flex property
This document describes the Container flex properties and how they can be applied in the Editor panel. It will help you better optimize your designs using Container block.
Direction
The direction option is the basic but most important of container layout options. Choose Row, Column, or the Reversed options depending on your needs.
- Row: Items are positioned horizontally
- Column: Items are positioned vertically
- Row Reverse: Items are positioned horizontally but in reverse order.
- Column Reverse: Items are positioned vertically but in reverse order
Align Items
When the direction is set to Row, you can change the alignment of items in the container to the top, middle, or bottom of the Container.
The following options are available under \’Align Items\’
- Flex Start: This aligns the items to the top of the container
- Center: This aligns the items to the center of the container
- Flex End: This aligns the items to the bottom of the container.
- Stretch: This will attempt to stretch the items to fit the container.
When the direction is set to column, you can change the alignment of items in the container to the left, middle, or right.
The following options are available under \’Align Items\’
- Flex Start: This aligns the items to the left of the container.
- Center: This aligns the items to the center of the container.
- Flex End: This aligns the items to the right of the container.
- Stretch: This will attempt to stretch the items to fit the container.
Justify Content
The justify-content property defines the alignment along the item’s center axis, and it also helps distribute the space leftover in the container between the items.
The following options are available under Justify content.
- Flex Start: This justifies the content to the starting edge of the container.
- Center: This justifies the content to the center of the container
- Flex End: This justifies the content to the ending edge of the container
- Space Between: This creates space between the content in which the first item is placed on the starting edge and the last to the ending.
- Space Around: This creates equal space between the container and the items.
- Space Evenly: This creates equal space between items without regard to the container.
Wrap
- When you use the wrap, it will allow elements that use a defined width to wrap into multiple lines rather than forcing the items to be on a single line. This can ‌create multi-line elements in the same container.
- When you use the wrap reverse, it will allow elements that use a defined width to wrap into multiple lines rather than forcing the items to be on a single line but in reverse order.
We don't respond to the article feedback, we use it to improve our support content.