• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

CSS Flexbox in Genesis

Last Updated on March 11, 2019 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

  • Featured Post Widgets in Columns
  • Site Inner with container background in Genesis Sample
  • Add Logo Between Site Title Area in Genesis
  • Expanding Search Box in Genesis
  • Add Custom Class to the Site Title in Genesis

Categories: Free Content, What's New? Tags: CSS, Flexbox

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service