CoursesAI WorkshopCompaniesPricingBlogNewsletter
  • Courses
  • AI Workshop
  • Companies
  • Pricing
  • Blog
  • Newsletter
Subscribe
  • Courses
  • Companies
  • Communities
  • Blog
  • Gift card
  • Newsletter
  • Help
  • Shop
  • ConfAiBot
  • Contact
  • Legal notice
  • General conditions
  • Privacy policy
  • Cookies policy

Course of Mastering CSS Flex

Standard
Isma NavarroRafa Gómez

By Isma Navarro y Rafa Gómez – Frontend

Learn how to fully leverage CSS Flex to create adaptable layouts easily.

Go to course

💸 First lesson available without registration 💸

With the arrival of CSS Flex on the web, we obtained a way to arrange content in an adaptable and easy manner without having to resort to frameworks or third-party tools.

In this course, you will explore all the properties related to a flex container and its children, understanding what each one is for and when it's beneficial to use them.

With this course you will learn to:

  • 👓 Understand all the properties related to flex.
  • 🥊 Differences between grid and flex. When to use each one?
  • 🔧 How to solve compatibility issues with old browsers.
  • 🍱 Assemble various components commonly used on the web.
  • 📐 Adjust the content of flex items.
  • 📲 Create responsive layouts without media queries.

Videos of the course

  • ↔ 5 ways to center content using CSS
  • 🥊 Differences between CSS grid and flex. When to use each one?

  • 🔀 Determine the direction of the container axes: flex-direction
  • 🍱 Organize the rows: flex-wrap
  • 📐 Set the space between rows: align-content and justify-content

  • 🎹 Adjust the content of flex items: align-items and align-self
  • 👮‍♀️ Set the order of content
  • 📏 Create flexible elements: flex-grow and flex-shrink
  • 🎇 Set the base size of our flex items: flex-basis

  • 🍸 Combine flex-basis and flex-wrap
  • 🎆 Delve into the alignment values of justify-content
  • 👉 Delve into the alignment values of align-items
  • 🙋‍♀️ Responsive layout without media queries using flex

  • 🔬 Analyze the new Codely design
  • 🦾 Build the header with a responsive navigation menu
  • 🧱 Course list: create a masonry layout that maintains reading order with flex
  • 💸 Pricing section with highlighted element

  • ⬆️ Is it good practice to set the height of an element in a flex container?
  • 🥊 Fixed width vs height with flex-wrap:wrap and flex-direction:column
  • 🧮 Line break in the Masonry flex layout deciphered

  • 🔧 Compatibility of flexbox with old browsers
  • 🤘 Next steps
Go to course

Related courses

Standard
Tailwind CSS: Architecture and Best Practices

🚤 Tailwind CSS: Architecture and Best Practices

Paco CastellóRafa Gómez

Learn how to structure your Tailwind CSS projects following best practices.

See course
Standard
Job offers

📄 Job offers

Javier FerrerRafa Gómez

Codely verified job offers

See course
Standard
Next.js: Open Graph Images

🖼️ Next.js: Open Graph Images

Javier FerrerRafa Gómez

Generate dynamic images in your Next.js projects for sharing on social media.

See course
See full catalogue

Pay according to your needs

lite (only monthly)

19 €
per month
  • Essential programming courses to build a solid foundation
Popular

standard

24,92 €
Discount vs monthly of 49 €
Annual payment of 299 €
per month
  • Main catalog to master writing maintainable, scalable, and testable code
  • Receive job offers verified by Codely
  • Company invoice
  • Accumulate renewal discounts

premium

41,58 €
Discount vs monthly of 89 €
Annual payment of 499 €
per month
  • Exclusive AI courses to keep you always up to date
  • Early access to new courses
  • Discount on workshops
  • Receive job offers verified by Codely
  • Company invoice
  • Accumulate renewal discounts

We won't increase the price while your subscription is active

SubscribeSign in