M1D10: CSS Flexbox Part 3

This is now the fourth course on CSS Flexbox I am taking. I first took the one from Udacity, then from Scrimba, and yesterday from Treehouse. So far, my top recommended is Scrimba for more hands-on approach, and Per did a really great job on simplifying the explanation even for complex topics. Then I recommend the one from Treehouse for more coverage on the fundamentals and theories. Gui also did a great job on presenting the lesson, he’s very professional and pleasant to watch. I also took a practice on CSS Flexbox from Freecodecamp. Freecodecamp is very neat when it comes to their hands-on approach. However, as an instructor myself, I think this approach may not be effective to all learners. The pacing is fast and it would be very easy for some people to miss the important points.

This fourth course is from Codeacademy. In my experience so far with Codeacademy, they have a neat interface for hands-on approach, but at times I feel like I wanted a video to watch, instead of the reading texts for explanation.

Flexible Box Layout or flexbox – a tool that greatly simplifies how to position elements.

Two important components:

• Flex Containers – an element on a page that contains flex items. 
• Flex Items – all direct child elements of a flex container are flex items. 

/* to designate a flex container */

display: flex;

/*or*/

display: inline-flex;

Flex Container

div.container {
  display: flex;
}

/* In the example above, all divs with the class container are flex containers. If they have children, the children are flex items. */

Any element can be a flex container.

Child elements of flex containers will change size and location in response to the size and position of their parent container.

Justify Content

To position the items from left to right, we use a property called justify-content.

.container {
  display: flex;
  justify-content: flex-end;
}

/* In the example above, we set the value of justify-content to flex-end. This will cause all of the flex items to shift to the right side of the flex container. */

• flex-start — all items will be positioned in order, starting from the left of the parent container, with no extra space between or before them.
• flex-end — all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
• center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
• space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
• space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.

Align Items

The align-items property makes it possible to space flex items vertically.

.container {
  align-items: baseline;
}

/* In the example above, the align-items property is set to baseline. This means that the baseline of the content of each item will be aligned. */

• flex-start — all elements will be positioned at the top of the parent container.
• flex-end — all elements will be positioned at the bottom of the parent container.
• center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
• baseline — the bottom of the content of all items will be aligned with each other.
• stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).

min-height, max-height, min-width, and max-width are properties that ensure an element is at least a certain size or at most a certain size.

Flex Grow

The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others.

.container {
  display: flex;
}
 
.side {
  width: 100px;
  flex-grow: 1;
}
 
.center {
  width: 100px;
  flex-grow: 2;
}

/*In the example above, the .container div has a display value of flex, so its three child divs will be positioned next to each other. If there is additional space in the .container div (in this case, if it is wider than 300 pixels), the flex items will grow to fill it. The .center div will stretch twice as much as the .side divs. For example, if there were 60 additional pixels of space, the center div would absorb 30 pixels and the side divs would absorb 15 pixels each.*/

If a max-width is set for an element, it will not grow larger than that even if there is more space for it to absorb.

flex-grow: 1; targets the flex items, and can use decimals.

Flex Shrink

The flex-shrink property can be used to specify which elements will shrink and in what proportions.

Note: The default value of flex-shrink is 1. However, flex items do not grow unless the flex-grow property is declared because the default value of flex-grow is 0.

.container {
  display: flex;
}
 
.side {
  width: 100px;
  flex-shrink: 1;
}
 
.center {
  width: 100px;
  flex-shrink: 2;
}

/* In the example above, the .center div will shrink twice as much as the .side divs if the .container div is too small to fit the elements within it. If the content is 60 pixels too large for the flex container that surrounds it, the .center div will shrink by 30 pixels and the outer divs will shrink by 15 pixels each. Margins are unaffected by flex-grow and flex-shrink. */

Note: Minimum and maximum widths will take precedence over flex-grow and flex-shrink.

Flex Basis

flex-basis allows us to specify the width of an item before it stretches or shrinks.

.container {
  display: flex;
}
 
.side {
  flex-grow: 1;
  flex-basis: 100px;
}
 
.center {
  flex-grow: 2;
  flex-basis: 150px;
}

/* In the example above, the .side divs will be 100 pixels wide and the .center div will be 150 pixels wide if the .container div has just the right amount of space (350 pixels, plus a little extra for margins and borders). If the .container div is larger, the .center div will absorb twice as much space as the .side divs. */

Flex Wrap

• flex items to move to the next line when necessary. 

1. wrap — child elements of a flex container that don’t fit into a row will move down to the next line
2. wrap-reverse — the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)
3. nowrap — prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.

.container {
  display: inline-flex;
  flex-wrap: wrap;
  width: 250px;
}
 
.item {
  width: 100px;
  height: 100px;
}

/* In the example above, three flex items are contained by a parent flex container. The flex container is only 250 pixels wide so the three 100 pixel wide flex items cannot fit inline. The flex-wrap: wrap; setting causes the third, overflowing item to appear on a new line, below the other two items.

Note: The flex-wrap property is declared on flex containers. */

Align Content

align-items is for aligning elements within a single row. If a flex container has multiple rows of content, we can use align-content to space the rows from top to bottom.

• flex-start — all rows of elements will be positioned at the top of the parent container with no extra space between.
• flex-end — all rows of elements will be positioned at the bottom of the parent container with no extra space between.
• center — all rows of elements will be positioned at the center of the parent element with no extra space between.
• space-between — all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.
• space-around — all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
• stretch — if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).

.container {
  display: flex;
  width: 400px;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-around;
}
 
.child {
  width: 150px;
  height: 150px;
}

/* In the example above, there are four flex items inside of a flex container. The flex items are set to be 150 pixels wide each, but the parent container is only 400 pixels wide. This means that no more than two elements can be displayed inline. The other two elements will wrap to the next line and there will be two rows of divs inside of the flex container. The align-content property is set to the value of space-around, which means the two rows of divs will be evenly spaced from top to bottom of the parent container with equal space before the first row and after the second, with double space between the rows.

Note: The align-content property is declared on flex containers. */

Flex Flow

The shorthand flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

/* with flex flow */
.container {
  display: flex;
  flex-flow: column wrap;
}

/* In the example above, the first value in the flex-flow declaration is a flex-direction value and the second is a flex-wrap value. All values for flex-direction and flex-wrap are accepted.

Note: The flex-flow property is declared on flex containers. */

Nested Flexboxes

<div class='container'>
  <div class='left'>
    <img class='small' src='#'/>
    <img class='small' src='#'/>
    <img class='small' src='#' />
  </div>
  <div class='right'>
    <img class='large' src='#' />
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.left {
  display: inline-flex;
  flex: 2 1 200px;
  flex-direction: column;
}
 
.right {
  display: inline-flex;
  flex: 1 2 400px;
  align-items: center;
}
 
.small {
  height: 200px;
  width: auto;
}
 
.large {
  height: 600px; 
  width: auto;
}

/* What happened here - .container was made flex, and also .left and .right are also flex containers, though they are nested */

/* In the example above, a div with three smaller images will display from top to bottom on the left of the page (.left). There is also a div with one large image that will display on the right side of the page (.right). The left div has a smaller flex-basis but stretches to fill more extra space; the right div has a larger flex-basis but stretches to fill less extra space. Both divs are flex items and flex containers. The items have properties that dictate how they will be positioned in the parent container and how their flex item children will be positioned in them. */

Review

1. display: flex changes an element to a block-level container with flex items inside of it.
2. display: inline-flex allows multiple flex containers to appear inline with each other.
3. justify-content is used to space items along the main axis.
4. align-items is used to space items along the cross axis.
5. flex-grow is used to specify how much space (and in what proportions) flex items absorb along the main axis.
6. flex-shrink is used to specify how much flex items shrink and in what proportions along the main axis.
7. flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink.
8. flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.
9. flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough.
10. align-content is used to space rows along the cross axis.
11. flex-direction is used to specify the main and cross axes.
12. flex-flow is used to specify flex-wrap and flex-direction in one declaration.
13. Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers.