CSS3 Flex Layout Flexbox Properties

Original:A Visual Guide to CSS3 Flexbox Properties

The flex layout is officially called the CSS flexble box layout model is CSS3 in order to increase the alignment, orientation, order of elements in the container, even if they are dynamic or uncertain size of the new layout model. The main feature of the Flex container is the ability to adjust its child elements to fill the appropriate space with the most appropriate method in different screen sizes.

Many designers and developers find flex layouts easy to use, positioning elements simple so many complex layouts can be implemented with little code, leading to a simpler development process. The Flex layout algorithm is direction-based and differs from horizontal or vertical block and inline layouts, which can be used in small application components, while the CSS3 grid layout model is an emerging processing large-scale layout.

This article focuses on how each flex property affects the layout in a lifelike way.

1. Basic concept:

Before we begin to describe the Flexbox property, let's start with a small introduction to the Flexbox model, where the flex layout is called the Flex container (Flex-container) by the parent container and its immediate child elements are called Flex projects (Flex-item) , which are referred to as "containers" and "projects" below.

You can see the properties and terminology used to describe the flex container and its child elements, and you can read the official documents of the website to see what they mean.

• The Flex container has two reference axes: a horizontal spindle (main axis) and a crossed axis (cross axis).
• The starting position of the spindle is main start, the spindle end position is main end;
• The starting position of the intersection is called Cross start, and the end position is called crossing end;
• The direct sub-element "project" is arranged along the spindle;
• The main axis space occupied by a single item is called the main size, and the occupied intersection space is called cross size.

Flexbox is the new layout proposed by the 2009, which uses the latest October 2014 standards, and its latest browser support

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with-webkit-)
• Android 4.4+
• IOS 7.1+ (prefixed with-webkit-)

2. Usage:

Use the flex layout to first set the display property on the parent element in HTML:

. flex-container {    display:-webkit-flex;/* Safari */    Display:flex;}

or if you want it to be like inline elements, you can write this:

. flex-container {  display:-webkit-inline-flex;/* Safari */  Display:inline-flex;}

Note: This is the only property that you want to set on the parent container, and all the immediate child elements become auto Flex projects.

3. Flexbox Container Properties:

Flex-direction:row (default value) | Row-reverse | Column | Column-reverse;

This property specifies how Flex's projects are arranged in the Flex container, setting the Flex container's spindle direction, which is arranged in two main directions, arranged horizontally as a row, or vertically arranged like a column.

Values

. flex-container {  -webkit-flex-direction:row;/* Safari *  /flex-direction:         Row;}

The row direction indicates that the flex project is stacked from left to right in a row in a container.

. flex-container {  -webkit-flex-direction:row-reverse;/* Safari *  /flex-direction:         row-reverse;}

The row-reverse direction indicates that the flex project is stacked from right to left.

. flex-container {  -webkit-flex-direction:column;/* Safari *  /flex-direction:         column;}

column direction indicates that the flex project is stacked from top to bottom in a column

. flex-container {  -webkit-flex-direction:column-reverse;/* Safari *  /flex-direction:         column-reverse ;}

Column-reverse direction indicates that a flex project is stacked from bottom to top in a column

Flex-wrap:nowrap (default value) | Wrap | Wrap-reverse;

Initially, Flexbox's idea is that all items are arranged on a single line (axis), and the Flex-wrap property controls whether the container arranges its items in one or more rows, and controls the direction of the new row stacking.

Values

. flex-container {  -webkit-flex-wrap:nowrap;/* Safari *  /flex-wrap:         nowrap;}

Flex projects are arranged on a single line and they scale to fit the width of the container.

. flex-container {  -webkit-flex-wrap:wrap;/* Safari *  /flex-wrap:         wrap;}

Items (flex items) are displayed on multiple lines and can be arranged from left to right or top to bottom if needed.

. flex-container {  -webkit-flex-wrap:wrap-reverse;/* Safari *  /flex-wrap:         wrap-reverse;}

Flex-flow: <flex-direction> | | <flex-wrap>;

This property is a shorthand for the above two properties, the previous parameter is set Flex-direction, and the latter parameter is set to Flex-wrap;

Values

. flex-container {  -webkit-flex-flow: <flex-direction> | | <flex-wrap>;/* Safari *  /Flex-flow:         <flex-direction> | | <flex-wrap>;}

Default value: Row Nowarp

Justify-content:flex-start (default value) | Flex-end | Center | Space-between | Space-around;

Defines the alignment of the item on the container spindle, when the item in the container is a row and inelastic, or if the item is elastic but reaches its minimum width, this property can define the allocation of the remaining space in the container.

Values

. flex-container {  -webkit-justify-content:flex-start;/* Safari */          Flex-start;}

Align all items to the left of the container

. flex-container {  -webkit-justify-content:flex-end;/* Safari *  /justify-content:         flex-end;}

Align all items to the right side of the container

. flex-container {  -webkit-justify-content:center;/* Safari *  /justify-content:         Center;}

Align all items in container center

. flex-container {  -webkit-justify-content:space-between;/* Safari *  /justify-content:         Space-between;}

The first and last items are aligned to the boundaries of the container, and the remaining space is equal to each item

. flex-container {  -webkit-justify-content:space-around;/* Safari *  /justify-content:         space-around;}

All the items divide the remaining container space, including the first and last items (so the interval between items is one times greater than the interval between the first and last item and the container border).

Align-items:flex-start | Flex-end | Center | Baseline | Stretch (default value);

Defines the alignment of the item on the intersection axis, which is related to the current axis, similar to the justify-content, but perpendicular; This property sets the default cross-axis alignment for all items, including anonymous.

Values

. flex-container {  -webkit-align-items:stretch;/* Safari *  /align-items:         stretch;}

The item fills the entire height or width of the container (fill the whole height) from the beginning of the container intersection axis to the end point of the intersection axis.

. flex-container {  -webkit-align-items:flex-start;/* Safari *  /align-items:         Flex-start;}

The item is stacked at the beginning of the container's intersection (cross start).

. flex-container {  -webkit-align-items:flex-end;/* Safari *  /align-items:         flex-end;}

The item is stacked at the end of the container's intersection (cross end).

. flex-container {  -webkit-align-items:center;/* Safari *  /align-items:         Center;}

The item is stacked at the center of the cross axis of the container (center of the crossing axis)

. flex-container {  -webkit-align-items:baseline;/* Safari *  /align-items:         baseline;}

The baselines for all projects are aligned

Baseline? Don't know what the baseline is please poke here--what is the baseline?

Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch (default value);

When there is extra space on the cross axis, it has a multiline alignment, similar to the way justify-content aligns all items on the spindle.

Values

. flex-container {  -webkit-align-content:stretch;/* Safari *  /align-content:         stretch;}

The items in each line are later equal to the extra space on the cross axis.

. flex-container {  -webkit-align-content:flex-start;/* Safari *  /align-content:         Flex-start;}

Items are stacked together at the starting point of the cross-axis of the container.

. flex-container {  -webkit-align-content:flex-end;/* Safari *  /align-content:         flex-end;}

Items are stacked together at the end of the cross-axis of the container.

. flex-container {  -webkit-align-content:center;/* Safari *  /align-content:         Center;}

The line of the item is stacked in the middle of the container's cross axis.

. flex-container {  -webkit-align-content:space-between;/* Safari *  /align-content:         Space-between;}

Similar to justify-content, the line distance of a project is divided evenly across the container's intersecting axes, with the first and last lines aligned to the edge of the container.

. flex-container {  -webkit-align-content:space-around;/* Safari *  /align-content:         space-around;}

Similar to Justify-content, the line of the item divides the remaining space on the container's intersection, and the first and last lines also get some, and the interval between them is one-fold more than the interval between the first row and the end line to the container boundary.

Note: This property is only valid when there are multiple lines of items in the container, and if all items are only one row, then this property has no effect on the layout.

4. Flexbox Project Properties

<span style= "FONT-SIZE:14PX; Font-family:arial, Helvetica, Sans-serif; > Order: <integer></span>

The Order property controls the ordering of the container's immediate child elements in the container, by default in the container in which the items are arranged in increments of that number.

Values

Values:.flex-item {  -webkit-order: <integer>;/* Safari *  /order:         <integer>;}

This property allows you to easily control the order of items without having to make adjustments in the HTML code. This shaping value can be negative, and the default value is 0.

<span style= "FONT-SIZE:14PX;" >flex-grow: <number></span>

This property specifies the growth factor of the project, which determines how much width the current item can increase relative to other items when the container has the remaining space allocated.
values:

. flex-item {  -webkit-flex-grow: <number>;/* Safari *  /flex-grow:         <number>;}

When all items have equal flex-grow values, their size is the same.

The second item takes up more of the remaining space.

The default value is: 0
Note: Negative numbers are not used in this attribute

Flex-shrink: <number>

This property specifies the shrinkage factor for the project, which determines how much the item shrinks relative to other items when the container has the remaining space to shrink.

Values

. flex-item {  -webkit-flex-shrink: <number>;/* Safari *  /flex-shrink:         <number>;}

By default, all items are shrunk, but when we set the value of this property to 0, the item remains the size of the original.


The default value is: 1
Note: Negative numbers are not used in this attribute

Flex-basis:auto | <width>

The value of this property, like the value of width and height, specifies the initial size of the project before the flex factors allocates the remaining space.

Values

. flex-item {  -webkit-flex-basis:auto | <width>;/* Safari *  /flex-basis:         auto | <width>;}

Default value: Auto

Flex:none | Auto | [<flex-grow> <flex-shrink>? | | <flex-basis>]

The attribute is abbreviated as Flex-grow, Flex-shrink, and flex-basis, while the attribute value is also abbreviated: Auto Representation (1,1,auto), none = (0,0,auto)

Values

. flex-item {  -webkit-flex:none | auto | [<flex-grow> <flex-shrink>? | | <flex-basis>]; /* Safari *  /Flex:         None | auto | [<flex-grow> <flex-shrink>? | | <flex-basis>];}

Note: The use of flex is encouraged by the fact that flex will correctly reset components that are not identified to common usage during use.

Align-self:auto | Flex-start | Flex-end | Center | Baseline | Stretch

This property has the same effect as the container's Align-items property, which is used on a single project and can completely overwhelm the alignment defined by the Align-items in the container.
values:

. flex-item {  -webkit-align-self:auto | flex-start | flex-end | center | baseline | stretch;/* Safari */  Align-se LF:         Auto | flex-start | flex-end | center | baseline | stretch;}

Note: Auto indicates that the item uses the Align-items value of the parent element (container), and if the item has no parent element, the value of align-self is stretch.

Flex items is notable: float, clear, vertical-align these properties are invalidated for the project (Flex item).

CSS3 Flex Layout Flexbox Properties