Introduction to CSS flexbox

CSS Flexbox (or Flexible Box Layout) was a late addition to the CSS3 specification, aiming to address many of the layout issues of a webpage, especially when working with multiple device sizes and responsive web design. While the more recent CSS grid properties are capable of creating complex grid-based layouts, flexbox is often a better choice for laying out small groups of components within a larger layout, generally with far less code than when using grid. This post will give a short introduction to using the flexbox properties for common layout issues.

display: flex

The first step to creating a flexbox is applying a display: flex property to a parent element that will act as a container for all flex items within it.

While most layouts will require the use of additional properties. A simple 2-column layout can be created using this property alone.

For example, we can take a container with 2 div elements stacked on top of each other, and transform it into a 2-column layout with the addition of the display: flex property:

Original Code:

HTML

<div id="container">
    <div id="column1"></div>
    <div id="column2"></div>
</div>

 

CSS:

#container {
    height: 600px;
    width: 800px;
}
#column1 {
    background-color: blue;
    height: 300px;
    width: 400px;
}
#column2 {
    background-color: green;
    width: 400px;
    height: 300px;
}

 

Introduction to CSS flexbox

CSS with flexbox:

#container {
    height: 600px;
    width: 800px;
    display: flex;
}
#column1 {
    background-color: blue;
    height: 300px;
    width: 400px;
}
#column2 {
    background-color: green;
    width: 400px;
    height: 300px;
}

 

Introduction to CSS flexbox

flex-direction

We can add additional control over the flow of elements in our flex container via the flex-direction property. By default all elements within a flex container will flow in a row from left to right, although we can also set this property to have values of column, row-reverse or column-reverse.

Adjusting spacing and alignment with justify-content

Oftentimes there will be more space in a container than what the elements within it take up, so it is likely that you’ll want to justify the spacing of the elements in a certain way. By default, all elements within a flex container will align to the very beginning of the container (referred to as flex-start) but there are a variety of other options. Note that the actual position will vary depending on the the setting of flex-direction: if the direction is set as row then flex-start will indicate all the way to the left of the container, while a direction of column would indicate the very top of the container for flex-start.

Returning to our original code example, we’ll increase the width of our container a bit to better show the different justify-content settings.

justify-content: center will place all of the elements directly in the center of the column:

<div id="container">
    <div id="column1"></div>
    <div id="column2"></div>
</div>

 

#container {
    height: 600px;
    width: 1000px;
    display: flex;
    justify-content: center;
}
#column1 {
    background-color: blue;
    height: 300px;
    width: 400px;
}
#column2 {
    background-color: green;
    width: 400px;
    height: 300px;
}

 

Introduction to CSS flexbox

justify-content: flex-end is the opposite of justify-content: flex-start, placing the elements at the very end of the container:

CSS flexbox tips

justify-content: space-between will place all elements on each end of the container, leaving whatever space remains at the center of the container, as well as around any additional elements inside (in instances of a container with 3 or more elements):

CSS flexbox hacks

justify-content: space-around is just like spae-between, although there is additional space on the very ends of the container:

CSS flexbox tips & tricks

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC