FlexBox

Yes I know that FlexBox is part of CSS, but if in your previous pages you struggle with CSS to achieve: Layout, Positioning, Block-Formatting, Centering, etc…. you know that getting the desire results using CSS Floats and other Properties can be very frustrating, the hard part should be make it Dynamic and Interactive not building the frame. FlexBox can make the process of creating the Frame more easy and fast, and that put FlexBox in a category of its own and here in a post of its own. enjoy. I will put more updates when I learn more about FlexBox.


css-tricks.com  —  Ultimate  —  CCpdf

GAME: flexboxfroggy


Udemy: Professional CSS Flexbox

  • flex-wrap to create multi-line flex boxes.
  • justify-content to distribute empty space between our items per line
  • flex-direction to control which way our main and cross axis point
  • align-items to align our items along the cross axis per line
  • align-content to distribute extra cross axis space between our lines

Basic Definitions:

Flex Container: Any Element with the CSS property :  display: flex;  or   display: inline-flex; 

Flex Items: Any Element that is INMEDIATE Child of a Flex Container. and will take Only the space that they need, as stipulated in the CSS-Properties.

Two types of Flex Container:

  • display: flex;   ==  Block Level Element, Meaning: Put it self in a New-Line all takes all available with.
  • display: inline-flex;  ==  Now the container takes only the space It needs, sharing the line with other elements.

flex-wrap:

Udemy 2:20 – jsbin – If there is no enough width in the Horizontal width of the Container for the combine width of all elements, Then by default they will squish and share the available width in equality, unless we “flex-wrap” is modify from its default value of: “flex-wrap: nowrap;”

Wrap is a property of the container, if we set up: “flex-wrap: wrap;” then the container is allow to take as many lines as need to fit its elements in they original width.

Justify-content:

Udemy 2:32 – jsbin – It distribute the items of a container without know the exact dimensions or having to specify, a complex margin and float rules.providing Manipulation in the “Main-Axis” (Horizontally) even center. This rule is only taken on account when is extra space.

flex-direction:

Udemy 2:04  –  jsbin  – Gives control to in what direction the items are lay-out to understand this better we need to understand two new concepts:

  1. Main Axis: what direction the Items are layout.    Default: Left — to — Right.
  2. Cross Axis: what direction New-Lines are added.   Default: Top — to Bottom.

                    flex-direction: column  &  column-reverse;

Column: will change the Main-Axis to: Top — to Bottom. like in a single Column, it will take as much vertical space needs to fit all its Items in a single Column, if you want it to take just a specific height, well you need to code it: height: 150px; and if the vertical space is not long enough it will “Wrap“.  column-reverse will do the opposite.

align-items:

Udemy 3.12  –  JsBin  :    align-items to align our items along the cross axis per line

This property will allow to manipulate the position of the items relative tot “Cross-Axis” (Vertically) Even Center them. Always maintaining the ITEM-HEIGHT. as long is smaller than the container,   Note: Baseline will align items in a Per-Line bases.

align-content:

Udemy 2:17  –  JsBin  :    align-content to distribute extra cross axis space between our lines

This is very similar to “align-items:” providing Manipulation in the “Cross-Axis” (Vertically) even center. with some variations like:

  • It can work just the same in Columns,  “flexdirection: column;
  • It can be use to Align and Distribute LINES across any extra space.

Element Properties.

  • order to change the display order of items
  • flex-grow to specify how our items take up extra main-axis space when available
  • flex-shring to specify how our items shrink when there isn’t enough main-axis space
  • flex-basis to specify a dimension tied to the main-axis
  • align-self to align individual items along the cross-axis on their line

order:

Udemy 2:22  –  JsBin  :  By default:   order: 0;  in all items., Using this you can change the order in which the elements are display.

flex-grow:

Udemy 3:03  –  JsBin.  by default all elements will take only the space need, and if the container is bigger they will leave the extra space empty,

flex-grow is how the elements will divide that reminder space. this flex grow is Responsive to window size.

flex-shrink:

Udemy 2.05  –  JsBin. this specify how the items will shrink in comparation with the other items, when the container do not have enough space for the total size of the items.

Example: flex-shrink: 2;  do not means that the Item will be half the size, this means that the number of pixels  cut, will be double the number the items with size 1;

flex-basis:

Udemy 2.05  –  JsBin.

Usint flex-basis in an Item we can ensure that will take a particular amount of space along its Main-Axis regardless which direction is pointing.

align-self:

Udemy 1:56  –  JsBin.  does the same thing than “align-items” but this is for each individual item, and it overwrites “align-items” unless “align-self: auto;

Shorthand Properties

There are two:

  • flex:
  • flex-flow:

“Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously” – MDN CSS Shorthand Properties

Examples:

For Flex Items:

The shorthand property flex specifies flex-grow, flex-shrink but only if flex-grow is specified, and / or flex-basis.

Examples

 .



Flexbox Quick Reference

Concepts

  • Flex Container : Any HTML element with the CSS property of display set to “flex” or “inline-flex“.
  • Flex Item : Any element that is a direct child of a Flex Element.
  • Main Axis : The direction items are laid out on a line. By default this is left to right.
  • Cross Axis: The direction that lines are added to the flex container. By default this is top to bottom.

CSS properties for Flex Containers

display : Designate an element as a Flexbox or Inline Flexbox

  • flex
  • inline-flex

flex-wrap : Specify whether items should wrap when there is not enough space to display them all.

  • no-wrap (default)
  • wrap
  • wrap-reverse

justify-content : Distribute extra space between items per line.

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around

flex-direction : Specify which direction the Main and Cross axes point.

  • row (default)
  • row-reverse
  • column
  • column-reverse

align-items : Align the items along the cross axis per line.

  • flex-start (default)
  • flex-end
  • center
  • stretch
  • baseline

align-content : Distribute extra space between lines.

  • flex-start (default)
  • flex-end
  • center
  • stretch
  • space-between
  • space-around

CSS properties for Flex Items

order : Takes a group number, default is 1

flex-grow : Takes a positive number that determines what proportion of empty space an item gets to take for itself. Default is 0.

flex-shrink : Takes a positive number that determines how fast an item shrinks relative to other items when there is not enough space to display all items. Default is 1.

flex-basis : Specifies how much space an item will take up along it’s main axis. Takes either an exact dimension like 150px, 10rem, or 30% or the word auto. Auto means use the height or width CSS property specified for the item or fall back to its content size. Default is auto.

align-self : Align an individual item on its line.

  • auto (default)
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

Helpful Resourses

x




Notes from Other classes

To start in the parent container set up the Display:

Flex Direction

This depends from what “Axis” we are using, by default it uses the Main axis, but we also have the  Cross axis

MAIN: when row goes from Left to Right  — when column goes from Top to Bottom.

CROSS: wen row goes from Top to Bottom.  — when column goes from Left to Right

 

To reverse the Direction of the elements.

Wrapping elements with Flexbox

Flexbox Re-Ordering

Alignment and Centering

Justify – Horizontally: V6

Align-Items – Vertically: V 7, 8, 9

Divide space btween elements

Flex: grow shrink bases;




Udemy: Professional CSS Flexbox

Basic Definitions:

Flex Container: Any Element with the CSS property :  display: flex;  or   display: inline-flex; 

Flex Items: Any Element that is INMEDIATE Child of a Flex Container. and will take Only the space that they need, as stipulated in the CSS-Properties.

Two types of Flex Container:

  • display: flex;   ==  Block Level Element, Meaning: Put it self in a New-Line all takes all available with.
  • display: inline-flex;  ==  Now the container takes only the space It needs, sharing the line with other elements.

flex-wrap: nowrap;

 

Udemy 2:20 – jsbin – If there is no enough width in the Horizontal width of the Container for the combine width of all elements, Then by default they will squish and share the available width in equality, unless we “flex-wrap” is modify from its default value of: “flex-wrap: nowrap;”

Wrap is a property of the container, if we set up: “flex-wrap: wrap;” then the container is allow to take as many lines as need to fit its elements in they original width.

Justify-content; flex-start;

Udemy 2:32 – jsbin – It distribute the items of a container without know the exact dimensions or having to specify, a complex margin and float rules. This rule is only taken on account when is extra space.

flex-direction: row | row-reverse | column | column-reverse

 

 

 

x

 

 

video

 

.



Copyright 2017. All rights reserved.

Posted January 31, 2017 by Edmundo in category "FED