Walkthrough and solutions

 

-A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.

CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.- by FreeCodeCamp

 

(You can find the flexbox challenges here)

 

Use display: flex to Position Two Boxes

enlightenedPlacing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.

angelThe solution →  display:flex

 

Add Flex Superpowers to the Tweet Embed

angel The solution → display:flex (in header, the header's .profile-name, the header's .follow-btn, the header's h3 and h4, the footer, and the footer's .stats)

 

Use the flex-direction Property to Make a Row

enlightenedAdding “display: flex” to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column.

 

The options for flex-direction are: row-reverse and column-reverse.

Note: The default value for the flex-direction property is row.

 

angelThe solution → flex-direction: row-reverse

 

Apply the flex-direction Property to Create Rows in the Tweet Embed

angelThe solution → flex-direction: row (in header and footer)

 

Use the flex-direction Property to Make a Column

enlightenedThe flex-direction property can also create a column by vertically stacking the children of a flex container.

angelThe solution → flex-direction: column

 

Apply the flex-direction Property to Create a Column in the Tweet Embed

angelThe solution → flex-direction: column (in .profile-name)

 

You can also watch the video where I talk and code the flexbox challenges from start to this point.

 

Align Elements Using the justify-content Property

enlightenedSometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this.

 

There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container.

 

Others options include:

  • - flex-start: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container.
  • - flex-end: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.
  • - space-between: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the other items between them are spaced evenly.
  • - space-around: similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items

 

angelThe solution → justify-content: center

 

Use the justify-content Property in the Tweet Embed

angelThe solution → justify-content: center (in .profile-name)

 

Align Elements Using the align-items Property

enlightenedThe align-items property is similar to justify-content. CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.

 

The different values available for align-items include:

  • - flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.
  • - flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.
  • - center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).
  • - stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.
  • - baseline: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.

angelThe solution → align-items: center

 

Use the align-items Property in the Tweet Embed

angelThe solution → align-items: center (in .follow-btn)

 

You can also watch the video where I talk and code the flexbox challenges up to this point.

 

Use the flex-wrap Property to Wrap a Row or Column

enlightenedThe flex-wrap property, tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.

 

CSS also has options for the direction of the wrap:

  • - nowrap: this is the default setting, and does not wrap items.
  • - wrap: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.
  • - wrap-reverse: wraps items from bottom-to-top if they are in a row, or left-to-right if they are in a column.

angelThe solution → flex-wrap: wrap

 

Use the flex-shrink Property to Shrink Items

enlightened The flex-shrink property allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it. The flex-shrink property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container.

angelThe solution → flex-shrink : 1 (in #box-1)

                                flex-shrink : 2 (in #box-2)

 

Use the flex-grow Property to Expand Items

enlightenedThe opposite of flex-shrink is the flex-grow property. The flex-grow property controls the size of items when the parent container expands.

angelThe solution → flex-grow : 1 (in #box-1)

                               flex-grow : 2 (in #box-2)

 

Use the flex-basis Property to Set the Initial Size of an Item

enlightenedThe flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow. The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.

angelThe solution → flex-basis: 10em (in #box-1)

                               flex-basis: 20em (in #box-2)

 

You can also watch the video where I talk and code the flexbox challenges up to this point.

 

Use the flex Shorthand Property

enlightened There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.

 

The default property settings are flex: 0 1 auto;.

 

angelThe solution → flex: 2 2 150px (in #box-1)

                               flex: 1 1 150px (in #box-2)

 

Use the order Property to Rearrange Items

enlightenedThe order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.

angelThe solution → order: 2 (in #box-1)

                               order: 1 (in #box-2)

 

Use the align-self Property

enlightened The final property for flex items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once.

align-self accepts the same values as align-items and will override any value set by the align-items property.

angelThe solution → align-self: center (in #box-1)

                               align-self: flex-end (in #box-2)

 

You can also watch the last part of the video series where I talk and code the flexbox challenges.

 

Are you still here?! Well, if you are, congratulations! You just finished the flexbox challenges by freecodecamp!

Disclaimer:  Flexbox definitions are by freecodecamp.org