×

HubSpot Guide to CSS Flexbox Layouts

/ CRM, Hubspot / By

HubSpot Guide to CSS Flexbox Layouts

Modern websites, including those built with HubSpot, rely on CSS Flexbox to create responsive layouts that are easy to control, align, and reorder without complex floats or positioning hacks.

This guide walks through the core Flexbox concepts from the original HubSpot CSS Flexbox tutorial, translating them into a practical, step-by-step reference you can apply to your own projects.

What Is CSS Flexbox and Why It Matters for HubSpot Pages

CSS Flexbox (Flexible Box Layout) is a layout module designed to distribute space along a single axis, either horizontally (rows) or vertically (columns). It helps you:

  • Align items horizontally and vertically with minimal code.
  • Create responsive layouts that adapt to different screen sizes.
  • Reorder blocks of content without changing the HTML structure.
  • Control spacing and sizing between elements consistently.

When you build landing pages, blogs, or website sections in a HubSpot environment, Flexbox provides the foundation for predictable layouts across devices.

Key Flexbox Concepts for HubSpot Developers

Flexbox layouts are based on two roles: a parent flex container and its child flex items. Understanding this relationship is essential before adjusting any module or section on a HubSpot page.

Flex Container

The flex container is the parent element that activates Flexbox. You turn any block into a flex container with a single declaration:

.container {
  display: flex;
}

In HubSpot templates or coded files, this might be a section, column wrapper, or custom module wrapper.

Flex Items

Flex items are the direct children of the flex container. Once the parent has display: flex;, each child automatically becomes a flex item. You can then control how each child:

  • Grows or shrinks.
  • Aligns on the cross axis.
  • Wraps or stays on a single line.

HubSpot Layout Basics: Main Axis vs Cross Axis

Flexbox works with two axes. Knowing these helps you design clean page structures similar to those in HubSpot themes.

  • Main axis: Defined by flex-direction (row or column).
  • Cross axis: Perpendicular to the main axis.

Common settings:

.container {
  display: flex;
  flex-direction: row;   /* horizontal */
}

.container-column {
  display: flex;
  flex-direction: column; /* vertical */
}

In HubSpot layouts, a row direction might be used for horizontal navigation, while column direction is common for stacked content on mobile.

Core Flexbox Properties for HubSpot Style Layouts

Below are the primary Flexbox properties you will reuse frequently when adjusting module spacing and alignment in any HubSpot-styled page.

1. display: flex

Enables Flexbox on the container:

.flex-wrapper {
  display: flex;
}

2. flex-direction

Controls the direction of the main axis:

.flex-row {
  display: flex;
  flex-direction: row;       /* default */
}

.flex-column {
  display: flex;
  flex-direction: column;
}
  • row (default): Items are placed left to right.
  • row-reverse: Items are placed right to left.
  • column: Items are stacked top to bottom.
  • column-reverse: Items are stacked bottom to top.

3. flex-wrap

Determines whether items stay on one line or wrap to multiple lines:

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
  • nowrap: All items remain on a single line.
  • wrap: Items move to a new line when they run out of space.
  • wrap-reverse: Items wrap in the reverse direction.

4. justify-content

Aligns flex items along the main axis. This is useful for horizontal spacing in many HubSpot page sections.

.flex-center {
  display: flex;
  justify-content: center;
}
  • flex-start: Items start at the beginning of the main axis.
  • center: Items are centered along the main axis.
  • flex-end: Items end at the far side.
  • space-between: Equal space between items.
  • space-around: Equal space around items.
  • space-evenly: Equal space between and at the ends.

5. align-items

Aligns items along the cross axis:

.flex-align-center {
  display: flex;
  align-items: center;
}
  • stretch: Items stretch to fill the container (default).
  • flex-start: Items align to the start of the cross axis.
  • center: Items are centered on the cross axis.
  • flex-end: Items align to the end of the cross axis.
  • baseline: Items align based on text baseline.

6. align-content

Affects multiple rows or columns of flex items when wrapping is enabled:

.flex-multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
  • flex-start, flex-end, center
  • space-between, space-around, stretch

HubSpot-Friendly Control for Individual Flex Items

Beyond container settings, you can adjust specific items, mirroring the fine-grained control you expect when building HubSpot modules.

flex-grow

Defines how much an item can grow relative to others:

.item-1 {
  flex-grow: 1;
}

.item-2 {
  flex-grow: 2;
}

Item 2 will take twice as much extra space as item 1.

flex-shrink

Controls how much an item shrinks when there is not enough space:

.item {
  flex-shrink: 0; /* prevent shrinking */
}

flex-basis

Sets the initial size of a flex item before free space is distributed:

.card {
  flex-basis: 300px;
}

flex (shorthand)

Combines grow, shrink, and basis into one property:

.card {
  flex: 1 1 250px; /* grow | shrink | basis */
}

order

Changes the visual order of items without rearranging HTML, similar to reordering modules in a HubSpot layout editor:

.feature-primary {
  order: 1;
}

.feature-secondary {
  order: 2;
}

align-self

Overrides the container’s align-items for a single item:

.highlighted-item {
  align-self: center;
}

Step-by-Step: Building a Simple Flexbox Layout

Follow these steps to build a basic Flexbox layout like those you might recreate in a HubSpot section.

Step 1: Create the HTML Structure

<div class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Step 2: Turn the Parent into a Flex Container

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Step 3: Style the Flex Items

.box {
  flex: 1 1 200px;
  margin: 0 10px;
}

This creates three boxes that share the row, resize with the viewport, and keep consistent spacing. The same principles apply when you customize a multi-column content block in a HubSpot page.

Best Practices for Using Flexbox in HubSpot-Like Projects

  • Start with mobile-first CSS, using Flexbox to stack items in a column, then switch to rows on larger screens.
  • Use Flexbox for one-dimensional layouts; rely on CSS Grid for more complex two-dimensional arrangements.
  • Keep classes descriptive (for example, .flex-row-center) so your CSS is easy to reuse across landing pages and templates.
  • Test alignment and wrapping at multiple breakpoints to ensure behavior matches expectations across devices.

Continue Learning CSS Layout for HubSpot Implementations

To deepen your understanding of Flexbox behavior, alignment options, and browser support, review the original tutorial on the HubSpot CSS Flexbox blog post. It includes additional visual examples and diagrams.

If you need strategic help applying these techniques in broader marketing or CRM implementations, you can explore expert support services at Consultevo.

By mastering Flexbox and applying these patterns consistently, you will create cleaner, more maintainable layouts that integrate seamlessly with a HubSpot-style component system and deliver a better experience on every device.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights