A basic overview of Flexbox
If you are fairly new at learning HTML and CSS, I’m sure you have said this while scratching your heads trying to position content on a web page, using say the display property, floats, or by using some positioning technique.
Yes, I have too! and by the way, these techniques are fine, and they work, but in some ways, they are also rather limiting and frustrating. And that’s why we’ll look into — Flexbox.
So why Flexbox?
Often while creating a simple layout, we may encounter some problems like:
a. Vertically centering a content inside its parent.
b. Making all the children of a container take up an equal amount of the available width/height.
c. Making multiple columns take up the same height even though they contain different amounts of content inside them. etc.
These are some common problems that are difficult to achieve using floats or positioning techniques. But these problems can be overcome easily using a Flexbox layout. Let’s see how it is done by starting off with the basics!
Let’s Dig In!
Flexbox is used to make any layout flexible i.e it allows you to align the items and distribute space among them even though the size of the items is unknown.
Flexbox Properties
To make flexible layouts we can use certain flex properties. These properties will be applied on a Flex Container or a Flex Item. You can think of the flex container as a parent <div> element, and the flex items as child <div> elements under it.
In Flexbox, in order to position content as you like, there are certain properties that can be applied only on a flex container and certain ones only on flex items within it. Make sure you create a parent container and some child elements within it to practice along as we move ahead.
I. Flex Container Properties
Display: This property can be applied to your parent container. It is used to activate the flexbox rules. Without using the display property we cannot use any flexbox properties.
.container{
display: flex;
}This property accepts 2 values:
flex: Similar to block-level element - covers the whole width available.
inline-flex: Similar to inline-level elements - covers the space it wraps.
2. flex-direction : This property determines the direction in which flex items inside your flex container will be laid down.
.container{
flex-direction: row;
}
Accepts 4 values:
row: This is the default value of flex item — left to right across the main axis.
column: Lays the flex items from top to bottom i.e across the cross axis.
row-reverse: Lays the items from right to left.
column-reverse: Lays the items from bottom to top.
3. flex-wrap : This property determines how the flex container will accommodate if there are extra flex items inside it.
.container{
flex-wrap: wrap;
}Say we had a parent container inside which we had 10 child item boxes of 100px width each. If we increased the width of each box to say 500px, still, flexbox manages to keep all items within the parent container. What actually happens is the width of each child box is still 100px and has not changed to 500px. This is flexbox’s default behavior.
Hence we use flex-wrap using which the child boxes break into a new line and now we can see that each child is taking a width of 500px.
4. flex-flow : This is a shorthand property for flex-direction and flex-wrap.
.container{
flex-flow: row wrap;
}Accepts 2 values:
first value — any flex-direction value
second value — any flex-wrap value.
5. justify-content : This property determines how the items will be laid out across the main axis. It also helps in making use of the extra space leftover in a container.
.container{
justify-content: flex-start;
}Accepts 6 values:
flex-start: positions items to the start of the container.
flex-end: positions items to the end of the container.
center: positions items to the center of the container.
space-between: Distributes equal space between each flex item except the first and last item which stick to each end.
space-around: Distributes equal space between each flex item except the first and last item which receive half as much space from the edges.
space-evenly: Distributes equal space between each flex item including the edge items.
6. align-items : This property is similar to justify-content but instead works on the cross-axis i.e vertically.
Accepts 5 values:
flex-start: positions items to the start of the container i.e at column top.
flex-end: positions items to the end of the container i.e at the column bottom.
center: positions items to the center of the container.
stretch: This is the default value. By using this, all the flex items in a container are stretched to fill the parent container. This property is useful when we have different amounts of content in each child container, so the stretch value will make each child have the same height.
baseline: positions all texts (numbers) along a baseline, even though all font sizes may be different.
Note These 4 values won't work if the flex-direction is row i.e along the main axis.
7. align-content : This property is just like justify-content but works on the cross-axis. In order for this property to work, we must have multiple rows.
II. Flex Item Properties
These properties can be applied to the child elements inside your parent container.
order: This property is used to re-order flex items within a container without changing the code in your HTML document.
We can give an order value to a flex item to position it before or after any other item. It accepts values like -1,1,2 etc. and the default value is ‘0’.
.container{
display: flex;
}
.box-2{
order: -1;
}Now as we can see the second child box is placed ahead of the first box:
2. flex : This is a shorthand property for three properties:
flex-grow : Allows the flex items to grow if there is extra space inside a container. Accepts non-negative values. The default value is ‘0’ i.e the size will be auto by default.
Here the box-2 which was given flex-grow value as ‘3’ has grown to fit the whole space available in the container.
flex-shrink : This property specifies how the item will shrink when we minimize the screen relative to the rest of the flexible items inside the same container. We can provide shrink to each item differently in the ratio in which we want it to be shrunk with respect to the other items.
flex-basis : This property sets the base width to the flex item from which the item will start to grow or shrink as specified.
These 3 properties can be given as a shorthand in the flex property. Here, the flex-grow is auto, flex-shrink is set to 1 and flex-basis is 400px.
.box-1{
flex: 0 1 400px;
}3. align-self : This property is similar to the align-items property but it is applied on a flex-item and it works on the cross-axis. It accepts the same 6 values as align-items, with one difference in its ‘auto’ value which will inherit whatever align-item value we have given to the parent container.
Summary
We have covered a basic introduction to flexbox with its properties which are useful in creating layouts much more easily than other positioning approaches. You can test yourself to verify that you’ve retained the stuff above, before you move on — Test your skills: Flexbox.
Also, do check out these useful Links:
* Flexbox Playground
* Practice Flex properties
* Flexbox useful guide
* How to make a simple layout using flexbox properties
fin!
