Register to get access to free programming courses with interactive exercises

Intro CSS: Flexbox fundamentals

The concept of Flex burst into the world of layout design like a bolt of lightning, quickly becoming one of the biggest layout design tools. One of the main problems in layout design has always been how difficult it is to allocate space between the numerous blocks and align them along the x and y axes. Previously, in order to center blocks vertically and horizontally, you had to use various tools and tricks and constantly make sure everything looked good, no matter the resolution. With the advent of mobile devices, this requirement became even more important, so a new system was introduced which was easier to use and more understandable.

This system is called Flex, and it's a concept that combines a new approach to the positioning of elements with a flexible system for working with height and width. The name, as you might imagine, comes from the word flexible, which is an apt name for this approach.

In this course, we'll get acquainted with Flex's main properties. We'll learn how to work with elements vertically and horizontally, and how to give them flexible height and width values.

Practice

Many of the lessons in this course will have practices with the web view. It's a good idea to go above and beyond the task at hand. Try experimenting with the code and features you've learnt once you've completed the task successfully.

You'll also encounter "Do it yourself" sections during the course. If necessary, you can practice within the tasks given in the assignments. They'll also have code samples that you can have a look at for clues or simply study them.

CodePen

Another opportunity you'll have to apply the skills learned in the course is CodePen. You can create your own pen, where you can experiment with positioning yourself.

Also, during each lesson in the course, there'll be examples loaded from CodePen. They are available for you to review, and you'll be able to edit code with instant real-time result rendering. Don't miss out on this opportunity.

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

Bookmate
Health Samurai
Dualboot
ABBYY