1.1Containers & layout (flexbox)
The essentials in 30 seconds
- Direction: elements line up in a row (horizontal) or a column (vertical).
- Alignment: justify (main axis) and align (cross axis) position the elements (start, center, end, spaced).
- Gap = the spacing between elements; wrap = elements move to the next line when space runs out.
Through-line — Nadia aligns the banner
Nadia wants a banner: on the left the logo and the name "Benali Joinery", on the right a "Request a quote" button, all vertically centered. Without Flexbox, the elements stack any old way. She discovers that direction + alignment + gap are enough to set everything, without a line of CSS.
Continues level 0 — Nadia moves from box theory to practice.
1. Direction and alignment
A Flexbox container first sets its direction: row (elements side by side, horizontally) or column (stacked vertically). Then the alignment: justify handles the position on the main axis (start, center, end, spaced), align on the cross axis. For Nadia's banner: row direction, justify "spaced" (logo left, button right), align "center" (vertically aligned).
These settings are made visually in the container's Layout tab — no code. You see the result move live on the canvas.
2. Gap, wrap and nesting
Gap sets the regular spacing between elements (cleaner than individual margins). Wrap lets elements move to the next line when width runs out — essential so three cards become one column on mobile.
Finally, nesting: a "row" container can hold "column" containers. Nadia nests to get, in the banner, a text block (name + slogan stacked) next to the button.
🔎 Concrete example — Setting the banner (Nadia's case)
Banner container: direction = row
justify = spaced (logo left, button right)
align = center (vertically aligned)
gap = 20px; wrap = enabled (for mobile)
→ Result: a clean banner, ready to switch to a column on small screens.Result: pro alignment in 4 settings.
Lesson: think direction → alignment → gap → wrap.
Section vocabulary
- Flexbox
- The modern system that handles the layout of elements inside a container.
Simple example: Nadia aligns logo and button edge to edge via Flexbox.
What it is not: positioning elements pixel by pixel with patched-up margins.
Reflex: to align inside a box, set the container's Flexbox.
- Direction
- The elements' alignment direction: in a row (horizontal) or a column (vertical).
Simple example: banner in a row; list of services in a column.
What it is not: thinking you can only align horizontally.
Reflex: side by side = row; stacked = column.
- Alignment (justify / align)
- justify positions on the main axis, align on the cross axis (start, center, end, spaced).
Simple example: justify "spaced" pushes logo and button apart; align "center" aligns them vertically.
What it is not: adding random margins to "push" an element.
Reflex: justify = along the direction; align = across it.
- Gap / Wrap
- Gap: the regular spacing between elements. Wrap: lets them move to the next line when space runs out.
Simple example: a 20px gap between 3 cards; wrap so they stack on mobile.
What it is not: putting a different margin on each element instead of a gap.
Reflex: regular spacing → gap; mobile adaptation → wrap.
- Nesting
- A container inside a container (e.g. a row holding columns).
Simple example: in the banner, a "text" container (name + slogan) next to the button.
What it is not: stacking containers with no real need.
Reflex: nest when a group of elements must behave together.
In practice — Building a banner in Flexbox
- Create a container, set its direction to "row".
- Put a logo/text on the left and a button on the right; set justify to "spaced".
- Set align to "center" to align vertically.
- Add a gap and enable wrap to anticipate mobile.
Ready-to-say script — justifying a layout choice (20 s)
"Your banner puts the name on the left and the quote button on the right, clearly visible and aligned. On mobile, the elements will automatically move below one another to stay readable. Everything is set cleanly, with no workarounds."
Tie each setting to a concrete benefit (readability, mobile).
Copy-paste template — container settings
CONTAINER: _______________
DIRECTION: row / column
JUSTIFY (main axis): start / center / end / spaced
ALIGN (cross axis): start / center / end / stretch
GAP: ____ px
WRAP: enabled / disabled
NESTING? (sub-containers): _______________Banner
Row, justify spaced, align center: logo on one side, action on the other.
List of services
Column, regular gap: each service stacked, airy.
Card grid
Row + wrap: 3 cards in a line that stack on mobile.
Center a block
justify center + align center: a block perfectly centered in its container.
✓ Best practices
- Prefer gap over individual margins.
- Enable wrap to anticipate mobile.
- Nest only when a group must move together.
✗ Common pitfalls
- Pushing elements with margins instead of justify/align.
- Forgetting wrap and breaking the mobile display.
- Over-nesting containers.
Key takeaways
- Direction: row or column.
- justify (main axis) and align (cross axis).
- gap = regular spacing; wrap = line return.
- Everything is set visually, without CSS.
48h challenge — apply tomorrow
Build a banner (logo + button) aligned with row direction, justify "spaced", align "center" and a gap. Enable wrap and check the mobile rendering in the preview. 20 minutes.
- I set direction, justify and align on a container.
- I use gap and wrap appropriately.
- I nest when the layout requires it.
Frequently asked questions
Do I need to know CSS to use Flexbox in Elementor?
No: everything is set visually (direction, justify/align, gap, wrap) in the Layout tab. Knowing the terms helps, but no code is required.
What's the difference between justify and align?
justify acts on the main axis (the direction's direction), align on the cross axis (perpendicular). In a row: justify = horizontal, align = vertical.
What is wrap for?
To let elements move to the next line when width runs out — essential so a row of cards stacks cleanly on mobile.
Nadia wants the logo on the left and the "quote" button on the right, vertically aligned. Which container settings?