Flexbox

  • Positioning items in CSS can be one of the most challenging aspects of web design, due to many different screen sizes and alignments. Flexbox is an efficient way of managing webpage layout and aligning elements.

  • The main idea is to give the outside container the ability to alter the width/height of its elements in order to best fill the available space (this can allow webpages to work well on different devices and screen sizes!)

Terminology:

  • Before we get started, its important to understand a few key terms that will be used to describe these processes.

  • parent and child - you may have already heard these terms. A child is any element that belongs to another element, which would be its parent element, for example the div with the id “mySubDiv1” is a child of its parent div, “myDiv”.

  • When using flexbox, there is a parent element, called the flex container, and child elements, called the flex items.

  • Properties for the parent (flex container):

  • Our parent and child elements for our flexbox layout can first be created in HTML, like this:

<div class="flex-container">
  <div class="flex-items" id="number1" >1</div>
  <div class ="flex-items">2</div>
  <div class ="flex-items">3</div> 
  <div class ="flex-items">4</div> 
  <div class ="flex-items">5</div> 
</div>
  • By adding the property display, with the value flex, in CSS, various flex properties can be used, like so:
.flex-container {
  display: flex;
}

  • We will go through these properties, showing codepen examples for each one.

  • For each example, we will use a styling for the flex items and the flex container that make it easy to see what is happening.

flex-direction

  • This defines in which direction the container wants to stack the flex items. (e.g vertial or horizontal) Common ways to set it are column or row. Row is the default, we can set it to column like this:

See the Pen 5.6 Example by LSU DDEM (@lsuddem) on CodePen.

  • comment out the line of code that sets flex-direction: column to see the default row view.

flex-wrap

  • This property specifies whether the flex items should wrap or not. This controlls whether they will “wrap” onto multiple lines, or be forced onto one line. Some values would be : wrap and nowrap. nowrap is the default! If you don’t specify, then your flex items will stay on the same line!

See the Pen 5.6 Example by LSU DDEM (@lsuddem) on CodePen.

flex-flow

  • flex-flow is a shorthand for both wrap and direction, so both could be specified, like so:

See the Pen 5.6 Example_1 by LSU DDEM (@lsuddem) on CodePen.

  • notice that while this looks the same as the previous example, the numbers are in a different order becuase they are in columns, not rows

justify-content

  • The justify-content property is used to align the flex items along the “main axis” (in a row layout, this is the x axis, in a column layout, its the y axis!) It will move all of the flex items to the the center, or to the left, or make space between them etc.

  • The center value aligns the flex items at the center of the container.

  • The flex-start value aligns the flex items at the beginning of the container (this is default).

  • The flex-end value aligns the flex items at the end of the container.

  • The space-around value displays the flex items with space before, between, and after the lines.

  • The space-between value displays the flex items with space between the lines.

  • For the justify content example, we are making our parent div take up the whole page, so you can clearly see the difference. Try out each different value and see what happens.

See the Pen 5.6 Example_2 by LSU DDEM (@lsuddem) on CodePen.

align-content

  • The align-content property is used to align the flex items along the cross axis. (the other axis that isn’t the main axis!)

  • The space-between value displays the flex lines with equal space between them.

  • The space-around value displays the flex lines with space before, between, and after them.

  • The stretch value stretches the flex lines to take up the remaining space (this is default).

  • The center value displays display the flex lines in the middle of the container.

  • The flex-start value displays the flex lines at the start of the container.

  • The flex-end value displays the flex lines at the end of the container.

  • Example:

See the Pen 5.6 Example_3 by LSU DDEM (@lsuddem) on CodePen.

  • Note: this property will only be useful when you have multiple rows wrapping onto different lines

align-items

  • The align-items property is used to align the flex items with themselves. This will only make a difference if some of the flex items are different sizes.

  • The center value aligns the flex items in the middle of the container.

  • The flex-start value aligns the flex items at the top of the container.

  • The flex-end value aligns the flex items at the bottom of the container.

  • The stretch value stretches the flex items to fill the container (this is default).

  • In this example, the height of the first item will be reduced to show the different possibilities of align items.

See the Pen 5.6 Example_4 by LSU DDEM (@lsuddem) on CodePen.

  • Again, try out the different options to see what happens!

Flex Items:

  • As well as flex container properties, there are a number of flex item properties that can be used to control the layout of the flex items.

  • For these examples, we will use a different layout. The styling for the outside container will be the same for each one.

order

  • The order property specifies the order of the flex items. The default is 0, so if no order property is specified, each will have an order of 0. If the first div is given an order of 1 it will be last, unless anything has an order greater than 1.

See the Pen 5.6 Example_6 by LSU DDEM (@lsuddem) on CodePen.

flex-grow:

  • The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

  • The value must be a number, the default value is 0.

  • If we give the third item a flex-grow value of 1, it will be larger than the other two items.

See the Pen 5.6 Example_6 by LSU DDEM (@lsuddem) on CodePen.

Read about more properties here: https://www.w3schools.com/css/css3_flexbox_items.asp

Exercise 5.6

See the Pen Exercise 5.6 by LSU DDEM (@lsuddem) on CodePen.