PopWP

WordPress and Genesis Tutorials

CSS Flexbox in Genesis

Last Updated on Favorited: 1 times

This tutorial is still in progress and will update time to time with more words, examples, and illustrations.

This tutorial provides the basic guide of working with Flexbox CSS in any WordPress or HTML site with the help and reference of mentioned resources at the end…

The Basic of Flexbox CSS

The basic understanding of flexbox is important in order to create an advanced listing block or moving the contents in a particular order.

Starting from…

.container {
display: -webkit-flex;
display: flex;
}

Support for different browsers can be found here.

We most of us use the display: flex; and display: inline-flex; to make anything align horizontally ——— and display: block; and display: inline-block; to make the contents vertically |||.

While these CSSs are common, we generally don’t use the flexbox all properties as it is generally used for advanced controls and we simply use default columns classes for this.

Flexbox Properties and values.

1. justify-content

justify-content property used to align the items horizontally ——— along to the main axis and accept the following values:

  • flex-start: Items align to the left side of the container.
  • flex-end: Items align to the right side of the container.
  • center: Items align at the center of the container.
  • space-between: Items display with equal spacing between them.
  • space-around: Items display with equal spacing around them.

Example:

.container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}

2. align-items

align-items property aligns items vertically ||| to the cross axis and accepts the following values:

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container.
  • stretch: Items are stretched to fit the container.

Example:

.container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}

3. flex-direction

The flex-direction property defines the direction of items are placed in the container i.e defines the direction of the main axis, and accepts the following values:

  • row: Items are placed the same as the text direction.
  • row-reverse: Items are placed opposite to the text direction.
  • column: Items are placed top to bottom.
  • column-reverse: Items are placed bottom to top.

Example:

.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}

4. order

It specifies the order of flex item.

Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to set it to a positive or negative integer value i.e -3, -2, -1, 0, 1, 2, 3.

Example:

.container {
display: -webkit-flex;
display: flex;
-webkit-order: 3;
order: 3;
}

5. align-self

align-self align a flex item along the cross axis overriding the align-items value and accept the similar value like align-items.

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container.
  • stretch: Items are stretched to fit the container.
.container {
display: -webkit-flex;
display: flex;
-webkit-order: 3;
order: 3;
-webkit-align-self: flex-end;
align-self: flex-end;
}

6. flex-wrap

flex-wrap can be useful to determine the items to be on single line or on multiple lines. It specifies whether flex items are forced on a single line or can be wrapped on multiple lines and accepts the following values:

  • nowrap: Every item is fit into a single line.
  • wrap: Items wrap around to additional lines.
  • wrap-reverse: Items wrap around to additional lines in reverse.

Example:

.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: now-wrap; 
flex-wrap: nowrap;
}

7. flex-flow

flex-flow is a shorthand property for flex-direction and flex-wrap used to work together accepts the value of one of the two properties separated by a space.

flex-flow: <flex-direction> <flex-wrap>;
flex-flow: row wrap;

Example:

.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}

8. align-content

align-content aligns a flex container’s lines within the flex container when there is extra space on the cross-axis and accepts the following values.

  • flex-start: Lines are packed at the top of the container.
  • flex-end: Lines are packed at the bottom of the container.
  • center: Lines are packed at the vertical center of the container.
  • space-between: Lines display with equal spacing between them.
  • space-around: Lines display with equal spacing around them.
  • stretch: Lines are stretched to fit the container.

This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

Example:

.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-start;
align-content: flex-start;
}

Flexbox Cheatsheet

Here is a graphical overview of the CSS Flexible Box Layout properties from darekkay. It is optimized to be printed on a single landscape format paper.

Source: https://darekkay.com/dev/flexbox-cheatsheet.html

Flexbox in Genesis

CSS Flexbox is used by Genesis themes because of infinite possibilities and control over contents. The simple example you can see on the front-page-1 section of Business Pro and Studio Pro theme from SEOthemes on StudioPress.

This will give you an idea how you can make the widgets to be appear on the different location of a container. Additionally, this type of CSS can be used to make the widgets to move on Center.

.SECTION-NAME .wrap {
margin: 0 auto;
padding-left: 5%;
padding-right: 5%;
}

.SECTION-NAME .wrap, .SECTION-NAME .widget {
position: relative;
}

.SECTION-NAME .widget {
padding-top: 10px;
max-width: 768px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

OR

This will center the widget contents in a section.

.SECTION-NAME .widget {
    display: block;
    margin: auto;
    max-width: 500px;
}

Still, I prefer to use flexbox too and use this as an alternative.

While Flexbox is important, CSS Grid provides next level of CSS layout possibilities. Here is the CSS Grid in Genesis article.

It is important to have basic CSS skill before learning CSS flexbox and CSS GRID.

Do let me know which is your favorite site to learn the basic CSS or flexbox CSS.

Resources:
http://flexboxfroggy.com/
https://cssreference.io/flexbox/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://www.sketchingwithcss.com/samplechapter/cheatsheet.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cheatsheet
https://darekkay.com/dev/flexbox-cheatsheet.html
http://learnlayout.com/flexbox.html

https://codeburst.io/a-simple-cheatsheet-for-flexbox-f5d3e1658447
https://codeburst.io/understanding-basic-concepts-of-css-flexbox-ffa657dc39c1
https://www.quackit.com/css/flexbox/examples/

Video Tutorials
https://teamtreehouse.com/library/css-flexbox-layout
https://flexbox.io/

Related Posts

Reader Interactions