Description
In this video, Google Creative Specialist Kent provides a walkthrough of Flexbox. Flexbox (CSS Flexible Box Layout) is a way to flexibly arrange elements in a container. The elements within the container can grow or shrink in order to optimize the container space while maintaining the specified ordering and spacing. You may find flexbox particularly useful if you want to align items of different sizes into rows or columns, with larger items taking up more space than smaller ones.
Related videos and help content mentioned:
Responsive Overview: https://www.youtube.com/watch?v=scwLEoHlNwU
Responsive Campaign Tutorial: https://www.youtube.com/watch?v=HMB0Zc1qpt0
Align elements with fluid layout Help Doc: https://support.google.com/webdesigner/answer/7002763
About flexbox Help Doc: https://support.google.com/webdesigner/answer/10995586
00:00 Intro
00:17 Build a flexible responsive CTA
01:18 Using flexbox
02:00 Vertical centering
03:30 Anchoring
04:09 Size constraints
04:40 Dynamic sale price example
06:50 Arranging multiple elements with flexbox
Available for Download now: google.com/webdesigner
Comment on the video below or submit feedback in our forum:
https://support.google.com/webdesigner/community