HTML & CSS Flexbox: Create Amazing Responsive Websites

Introduction to flexbox properties, presenting the list of properties for parent and children

This property defines a flex container; inline or block depending on the given value and  enables a flex context for all its direct children.

There are 2 possible values:

• Flex - Displays an element as a block-level flex container
• Inline-flex - Displays an element as an inline-level flex container

In this video we will check some of the default behaviors using the flexbox model for different situations.

The Flex-direction property establishes  the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

This property can have 4 values:

• Row (default value) - The flexible items are displayed horizontally, as a row
• Column -  The flexible items are displayed vertically, as a column
• Row-reverse - Same as row, but in reverse order
• Column-reverse - Same as column, but in reverse order

Note: if you change direction from row to column, the main axis and cross axis switch

The flex-wrap property specifies whether the flexible items should wrap or not.

The property can have 4 values:

• Nowrap (default value) -  specifies that the flexible items will not wrap
• Wrap - flex items will wrap onto multiple lines, from top to bottom.
• Wrap-reverse  - Specifies that the flexible items will wrap, if necessary, in reverse order

This property is a shorthand of flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. 

Default value is row nowrap.

This property defines the alignment along the main axis, and  distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

It can have 6 values:

• Flex-start (default value) - Items are positioned at the beginning of the container
• Flex-end  - Items are positioned at the end of the container
• Center - items are centered along the line
• Space-between - Items are positioned with space between the lines 
• Space-around - Items are positioned with space before, between, and after the lines
• Space-evenly - items are distributed so that the spacing between any two items (and the space to the edges) is equal

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Work as the justify-content  for the cross-axis.

It can have 5 values:

• Stretch (default value) - Items are stretched to fit the container
• Center - Items are positioned at the center of the container
• Flex-start - Items are positioned at the beginning of the container
• Flex-end - Items are positioned at the end of the container
• Baseline - items are aligned such as their baselines align

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justiy-content aligns individual items within the main-axis.

This property can have 6 values:

• Stretch (default value) - Lines stretch to take up the remaining space
• Center  - Lines are packed toward the center of the flex container
• Flex-start - Lines are packed toward the start of the flex container
• Flex-end - Lines are packed toward the end of the flex container
• Space-between - Lines evenly distributed; the first line is at the start of the container while the last one is at the end
• Space- around - Lines evenly distributed with equal space around each line

The order property receives a value that specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

Default value is 0.

This property specifies the flex grow factor of a flex item. It specifies what amount of free space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container. In attach you have a doc showing how the calculation is made.

Flex-shrink property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container. In attach you have a doc showing how the calculation is made.

The flex-basis property specifies the initial length of a flexible item.

This property specifies how a flex item will grow or shrink so as to fit the space available in its flex container. This is a shorthand property that sets flex-grow, flex-shrink and flex-basis.

This property can have 4 values:

• Auto - The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting  flex: 1 1 auto
  
• Initial - This is the default value. The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting flex: 0 1 auto
  
• None - The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting flex:0 0 auto
  
• <positive number> - The item is given the specified proportion of the free space in the container. This is equivalent to setting flex: <positive number> 1 0
  

The align-self property specifies the alignment for the selected item inside the flexible container.

It can have 5 properties:

• Stretch (default value) - The element is positioned to fit the container
• Flex-start - The element is positioned at the beginning of the container
• Flex-end - The element is positioned at the end of the container
• Baseline - Element is positioned at the baseline of the container
• Center - The element is positioned at the center of the container

Introduction to this section. Html with final page is avalable in file holy_final_resp.html

This lesson is dedicated to holy grail layout creation, using only a single container with 3 flex items. Header and footer are created outside

For this video i create two dimensional layouts by nesting a flex container inside another one. The main flex container includes header and footer allowing that flex container "controls" header and footer

Creation of header content containing images and text. The flexbox properties are used to position and align the elements.

Creation of nav content containing future navigation links, using an unordered list. The flexbox properties are used to position and align the elements.

In this part i create the article section  content, containing image and text. Like the other parts the flexbox properties are used to position and align the elements.

Creation of aside content containing only text. The flexbox properties are used to position and align the elements.

Creation of footer content containing only text. The flexbox properties are used to position and align the elements.

In this lesson i use  an advanced layout technique, only using a container, with all flex item inside. The use of the flex-wrap property and the  :nth-child selector will allow a great  flexibility to create layouts

Creation of Holy Grail using flex-wrap and :nth-child selector

Introduction to Media Queries and one 1st example showing how it works, using 2 flex items with respective content

Create responsive design without media queries, using only the combination of flex-wrap and flex-basis

Change your Webpage created in previous section, to have a Responsive Layout using Media Queries

Introduction to Section 6, where some projects will be created and shared

Create a responsive web gallery using flexbox properties. In this first part,you learn how to design the web gallery creating the different "blocks" that support the content of the page. Attached you have a document that shows a scheme of the planning of the web gallery with some properties that were used to position the different elements in the page. File Gallery.html shows the code for this page

In this video you'll learn how to tune the layout of the web gallery, add the images and create hover and shadow effects to the content using css3 properties. Attached you have a document that describe css3 transform and box-shadow properties, that are used to create some hover effects

Creation of a responsive form using Flexbox

Change Form elements position, using Order property and Box-Sizing property to control Width and Height values

Creation of a dynamic navigation menu using HTML and the Flexbox model to correctly position all layout elements. It also can works  as a image accordion without menu functions

Tuning layout using  css properties (transition, background:rgba, letter-spacing, etc...)  to create hover effects

For this new section I will create some contents with the help of the Jquery language in order to give some interactivity in our pages

In this video you learn how to create an interactive page (FAQS page) using the model flexbox and jquery language, using different Jquery Methods.

Use section tabs in your Webpage to organize page content. For this functionality its used Flexbox to organize page information and Jquery to create the Tabs

In this video lets learn how to use display utility classes used in Bootstrap:

• .d-flex

• .d-inline-flex

• .d-sm-flex

• .d-sm-inline-flex

• .d-md-flex

• .d-md-inline-flex

• .d-lg-flex

• .d-lg-inline-flex

• .d-xl-flex

• .d-xl-inline-flex

Flex direction utility classes:

• .flex-row

• .flex-row-reverse

• .flex-column

• .flex-column-reverse

• .flex-sm-row

• .flex-sm-row-reverse

• .flex-sm-column

• .flex-sm-column-reverse

• .flex-md-row

• .flex-md-row-reverse

• .flex-md-column

• .flex-md-column-reverse

• .flex-lg-row

• .flex-lg-row-reverse

• .flex-lg-column

• .flex-lg-column-reverse

• .flex-xl-row

• .flex-xl-row-reverse

• .flex-xl-column

• .flex-xl-column-reverse

Flex wrap utility classes list:

• .flex-nowrap

• .flex-wrap

• .flex-wrap-reverse

• .flex-sm-nowrap

• .flex-sm-wrap

• .flex-sm-wrap-reverse

• .flex-md-nowrap

• .flex-md-wrap

• .flex-md-wrap-reverse

• .flex-lg-nowrap

• .flex-lg-wrap

• .flex-lg-wrap-reverse

• .flex-xl-nowrap

• .flex-xl-wrap

• .flex-xl-wrap-reverse

Justify content utility classes used in bootstrap:

• .justify-content-start

• .justify-content-end

• .justify-content-center

• .justify-content-between

• .justify-content-around

• .justify-content-sm-start

• .justify-content-sm-end

• .justify-content-sm-center

• .justify-content-sm-between

• .justify-content-sm-around

• .justify-content-md-start

• .justify-content-md-end

• .justify-content-md-center

• .justify-content-md-between

• .justify-content-md-around

• .justify-content-lg-start

• .justify-content-lg-end

• .justify-content-lg-center

• .justify-content-lg-between

• .justify-content-lg-around

• .justify-content-xl-start

• .justify-content-xl-end

• .justify-content-xl-center

• .justify-content-xl-between

• .justify-content-xl-around

Align items list classes:

• .align-items-start

• .align-items-end

• .align-items-center

• .align-items-baseline

• .align-items-stretch

• .align-items-sm-start

• .align-items-sm-end

• .align-items-sm-center

• .align-items-sm-baseline

• .align-items-sm-stretch

• .align-items-md-start

• .align-items-md-end

• .align-items-md-center

• .align-items-md-baseline

• .align-items-md-stretch

• .align-items-lg-start

• .align-items-lg-end

• .align-items-lg-center

• .align-items-lg-baseline

• .align-items-lg-stretch

• .align-items-xl-start

• .align-items-xl-end

• .align-items-xl-center

• .align-items-xl-baseline

• .align-items-xl-stretch

Align content utility classes:

• .align-content-start

• .align-content-end

• .align-content-center

• .align-content-around

• .align-content-stretch

• .align-content-sm-start

• .align-content-sm-end

• .align-content-sm-center

• .align-content-sm-around

• .align-content-sm-stretch

• .align-content-md-start

• .align-content-md-end

• .align-content-md-center

• .align-content-md-around

• .align-content-md-stretch

• .align-content-lg-start

• .align-content-lg-end

• .align-content-lg-center

• .align-content-lg-around

• .align-content-lg-stretch

• .align-content-xl-start

• .align-content-xl-end

• .align-content-xl-center

• .align-content-xl-around

• .align-content-xl-stretch

Align self utility classes:

• .align-self-start

• .align-self-end

• .align-self-center

• .align-self-baseline

• .align-self-stretch

• .align-self-sm-start

• .align-self-sm-end

• .align-self-sm-center

• .align-self-sm-baseline

• .align-self-sm-stretch

• .align-self-md-start

• .align-self-md-end

• .align-self-md-center

• .align-self-md-baseline

• .align-self-md-stretch

• .align-self-lg-start

• .align-self-lg-end

• .align-self-lg-center

• .align-self-lg-baseline

• .align-self-lg-stretch

• .align-self-xl-start

• .align-self-xl-end

• .align-self-xl-center

• .align-self-xl-baseline

• .align-self-xl-stretch

Order utility classes:

• .order-0

• .order-1

• .order-2

• .order-3

• .order-4

• .order-5

• .order-6

• .order-7

• .order-8

• .order-9

• .order-10

• .order-11

• .order-12

• .order-sm-0

• .order-sm-1

• .order-sm-2

• .order-sm-3

• .order-sm-4

• .order-sm-5

• .order-sm-6

• .order-sm-7

• .order-sm-8

• .order-sm-9

• .order-sm-10

• .order-sm-11

• .order-sm-12

• .order-md-0

• .order-md-1

• .order-md-2

• .order-md-3

• .order-md-4

• .order-md-5

• .order-md-6

• .order-md-7

• .order-md-8

• .order-md-9

• .order-md-10

• .order-md-11

• .order-md-12

• .order-lg-0

• .order-lg-1

• .order-lg-2

• .order-lg-3

• .order-lg-4

• .order-lg-5

• .order-lg-6

• .order-lg-7

• .order-lg-8

• .order-lg-9

• .order-lg-10

• .order-lg-11

• .order-lg-12

• .order-xl-0

• .order-xl-1

• .order-xl-2

• .order-xl-3

• .order-xl-4

• .order-xl-5

• .order-xl-6

• .order-xl-7

• .order-xl-8

• .order-xl-9

• .order-xl-10

• .order-xl-11

• .order-xl-12

Flex grow and flex shrink utility classes:

• .flex-{grow|shrink}-0

• .flex-{grow|shrink}-1

• .flex-sm-{grow|shrink}-0

• .flex-sm-{grow|shrink}-1

• .flex-md-{grow|shrink}-0

• .flex-md-{grow|shrink}-1

• .flex-lg-{grow|shrink}-0

• .flex-lg-{grow|shrink}-1

• .flex-xl-{grow|shrink}-0

• .flex-xl-{grow|shrink}-1