All videos

V Flex and H Flex elements

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

V Flex and H Flex elements

The V Flex and H Flex elements help you design the layout of your site more quickly. That's because the V Flex and H Flex elements are just div blocks that have been pre-set to flex.

V Flex is set to vertical flex, which means that child elements placed in the div will flow vertically (i.e., up to down). H Flex is set to horizontal flex, which means that child elements placed in the div will flow horizontally (i.e., left to right).

<details>

<summary>

Video transcript

</summary>

When we came up with the concept of Micro Lessons, never did I imagine there’d be a topic so well-suited for the format.

Introducing V flex and H flex. Two elements in Webflow that will AUTOMATICALLY stack their children Vertically (that’s what the V stands for) or Horizontally (that’s what the H stands for).

And the secret? They’re just divs that come with the FULL power of flexbox, but with a time saving shortcut that saves you between one and two clicks every time.

But that’s a micro-description about two micro-elements in the Webflow Designer.

</details>

Video details

Duration

0:36

Topic

Design & build

Continue watching

V Flex and H Flex elements - 图1<h3>Migrate a site to Webflow</h3>1:16:53

V Flex and H Flex elements - 图2<h3>Cursor follow interactions</h3>10:25

V Flex and H Flex elements - 图3<h3>Build a cursor-following 3D button</h3>5:15

V Flex and H Flex elements - 图4<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

V Flex and H Flex elements - 图5<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "V Flex and H Flex elements",
  "description": "Use the V Flex and H Flex elements for more efficient layout design.",
  "url": "https://university.webflow.com/videos/v-flex-and-h-flex-elements",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b943f6d5736d8155a15873_648a4a407a656656c1f3e9da_WFU-Thumbnail-20(V-20Flex-20-26-20H-20Flex).webp",
  "duration": "0:36",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=va1GH4KgBQA",
  "embedUrl": "https://www.youtube.com/embed/va1GH4KgBQA",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}