CSS - Flex Box

Css Flex Align Content

About

flex is a layout model that lays out object in a single axis focused on space distribution and content alignment.

flex means:

  • flexible layout
  • as flexible size

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as:

A flex container is the box generated by an element with a computed display of:

  • flex:
    • items have equal height
    • auto margin are working to push item to top or bottom
    • vertical-align has no effect on a flex item.
  • or inline-flex.

In-flow children of a flex container are called flex items and are laid out using the flex layout model.

flex is good choice to achieve uniform sizing across several element. Example Card groups

Axis:

  • main-(axis|dimension|wise) - determined by the flex-direction (default to horizontal (ie row) and not vertical (ie column))
  • cross-(axis|dimension|wise) / 90 degree from the main-axis

Feature

  • columns without a specified width automatically layout as equal width columns
Features Description Property
Flow direction (leftwards, rightwards, downwards, or even upwards!) The flex-direction property
Display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order) order
Single line (main) or wrapped into multiple lines along a secondary (cross) axis Flex - flex-wrap (Single Line or Multi-Line)
“flex” sizes (respond to the available space, either growing to fill unused space or shrinking to avoid overflowing the parent) the flex property
Alignment with respect to their container or each other on the secondary (cross) align
Collapse or uncollapse dynamically along the main axis while preserving the container’s cross size margin and justify-content

Property

flex-flow = flex-direction (row, column) + flex-wrap (Single or multi-line)

CSS flex-flow property

Order

The CSS order property specifies the visual order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

/* Numerical value including negative numbers */
order: 5;
order: -5; 

/* Global values */
order: inherit;
order: initial;
order: unset;

Example

<div id='main'>
   <article>1 - Article</article>
   <nav>2 - Nav</nav>
   <aside>3 - Aside</aside>
</div>
#main { display: flex;  text-align:center; padding: 2rem; width: 100%; box-sizing: border-box; background-color: #aedcef;}
#main > article { order: 2; background-color: DeepSkyBlue; padding: inherit; flex:1; }
#main > nav     { order: 1; background-color: AliceBlue; padding: inherit; }
#main > aside   { order: 3; background-color: CadetBlue; padding:inherit; }

Flex Property - Length definition (flex-grow, flex-shrink, flex-basis)

CSS Flex - Flex Property (Length definition)

justify-content (horizontal distribution)

justify-content will distribute the object along the main axis

flex-start flex-end center space-between space-around

align-items (vertically)

An illustration of the five align-items keywords and their effects on a flex container with four colored items.

To apply align-items, height should be applied to the container.

flex-start flex-end center stretch foo foo foo foo foo foo foo foo foo foo foo foo foo foo baseline

align-content

An illustration of the align-content keywords and their effects on a multi-line flex container See flex-wrap (Svg source)

Css Flex Align Content

Documentation / Reference





Discover More
Bootstrap - Column

The system in Bootstrap is build with ClassName Syntax where: length is number between 0-24 that defines the length weight of the column For a 12 columns grid, col-8 will take 2 more space...
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
Firebug Display
CSS - (Display property|Box Type)

The display property defines the box model (layout) type. inline: Default value. Displays an element as inline element. Rules in the user agent's default style sheet may override this value block...
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
CSS - Float (box|property) (Layout)

CSS Float is a property of a block box. It shifts a box to the left or right on the current line and create a new position context. flexbox The most interesting characteristic of a float (or “floated”...
Grid Form With Horizontal Vertical Alignment
CSS - Grid

grid is a CSS layout system that provides a mechanism: to divide the available space into columns and rows (two-dimensional grid) to position into one or more intersections an html element (known...
Flex Vs Grid Css
CSS - Layout Mode (Visual Formatting Model)

This page is the layout available in CSS. A layout system is an algorithm which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: In Css,...
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
block directioninlinedirectionverticalwriting mode中文▼ left / block-end sideright / block-start side ▼top / inline-start side ▼bottom / inline-end side ▲width / block-sizeheight / inline-size
CSS - Flow

The flow is the direction of a block and inline layout against which the elements are positioned. This layout uses the concept of containing box as coordinate system. This containing box depends...
Css Flex Align Content
CSS Flex - Align (Left, Right, Center)

How to align CSS flex box. flexhorizontal positioning justify-content articleleftright justify-content See also the example: with Material...



Share this page:
Follow us:
Task Runner