Notes: Flexbox

Introduction to Flexbox

Flexbox is a one-dimensional model that only deals with one dimension at a time: row or column. However, it often produces two-dimensional layouts because it has a wrap property that allows elements to wrap around, giving the appearance of multiple rows or columns.

To use Flexbox, we need to apply the following properties

Set parent container to display: flex
Set flex-direction to column or row: flex-direction: column | row
Use justify-content To distribute children along the primary axis: justify-content: center
Use align-items To distribute children along the cross-axis: align-items: center

Flex Direction

Primary Axis: justify-content

Cross-Axis: align-items

Column

Vertical

Horizontal

Row

Horizontal

Verticl

Flex Row Example

Items are laid out by row and are centered across the row using justify-content.

<head>
<style>
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: blue;
}

.container > div {
  background-color: lightgrey;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  width: 55px;
  text-align: center;
}
</style>
</head>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
</body>

Column Flex Example

Items are laid out by column and are centered across the row using align-items.

<head>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: blue;
}

.container > div {
  background-color: lightgrey;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  width: 55px;
  text-align: center;
}
</style>
</head>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
</body>

Flex Box Wrap

The ability for this one-dimensional layout to wrap is what makes this a good choice for Responsive websites. In the code below, we have set up a centered, row wrap.

<head>
<style> 
#container {
  width: 80%;
  border: 1px solid #c3c3c3;
  padding: 5px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

#container div {
  width: 300px;
  height: 200px;
}
</style>
</head>

<body>
<div id="container">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>

The result on a screen wider than 600 px is shown below.

The result on a screen less than 600px is this:

This ability to spread content on a larger screen and contract to a single row on a smaller screen makes Flex so helpful when creating responsive web pages.

Centering Content on a Page Using FlexBox

To center the elements on a page using FlexBox, we use the flex-direction:column to line up the element in a column. The align-items property lines up elements on the cross-axis, so horizontally.

The code below demonstrates how to apply box model properties to achieve centered content.

<head>
<style>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
</head>

<body>
<div class="container">
	<h1>This Header is Centered</h1>
	<p>This element has is centered.</p>
</div>
</body>

The result is a page where the header and paragraph are both centered.

Resources

MDN Basic Concepts of Flexbox

PreviousNotes: Box Model NextNotes: Responsive Layout

Last updated 1 year ago

hashtagIntroduction to Flexbox

hashtagFlex Row Example

hashtagColumn Flex Example

hashtagFlex Box Wrap

hashtagCentering Content on a Page Using FlexBox

hashtagResources