A Beginners Introduction to CSS Flexbox
The CSS Flexbox Specification is a CSS module that gives you great flexibility when creating layouts.
CSS Flexbox is an elegant and lightweight approach to layouts. It can be used without installing an extra frameworks or libraries.
Flexbox is different from the regular layouts because you can lay out items inside a flex container in all possible directions. This means that your layouts can be organize top to bottom, bottom to top, left to right or right to left.
You can create a Flexbox layout is context by declaring a container using this property:
display : flex
Flexbox uses a parent-child relationship so when you declare a flex container, the direct children of this container will automatically turn into flex items. However, it’s worth noting that this doesn’t apply for items: the children of flex items are not flex items.
How Does Flexbox Work?
Flexbox works on an axis grid.
Each one of the flexbox properties works either on the container or on the items, defining the way how items should be laid out inside the container.
Flex items can be laid out in all directions across their particular axis: left to right, right to left, top to bottom or bottom to top.
You can even change the order of the flex items without the need of altering the source order of your code.
Flex items can grow to fill the available space inside a container, or they can shrink to prevent overflow. Flexbox allows you to control how to handle this available space.
The Flexbox Axes
A flexbox container has two axes:
- main axis
- cross axis
The main axis is determined by the value of the flex-direction property. The main axis can go in these directions:
left to right
right to left flex-direction:
top to bottom
bottom to top
The cross axis on the other side will be always perpendicular to the main axis. Take a look at the image below. This shows how the main axis is determined according to the different values of the flex-direction property.
The Flexbox Properties
The Flexbox module has its own set of properties. Some of these properties apply to the parent container while others apply to the flex items.
This series will explain the basic concepts of Flexbox together with many practical examples.
Come along with us and turn into a Flexbox master. Here are the tutorials so far:
- CSS Flexbox #1. Creating Your First Flexbox Layout
- CSS Flexbox #2. How to Use the justify-content Property
- CSS Flexbox #3. The align-items Property
- CSS Flexbox #4. The flex-grow Property
- CSS Flexbox #5. The flex-shrink Property
- CSS Flexbox #6. The flex-basis Property
- CSS Flexbox #7. The order Property
- CSS Flexbox #8. The flex-wrap Property
- CSS Flexbox #9. The align-content Property
- CSS Flexbox #10. The flex Shorthand Property