Go-Flex Layout Tutorial: Syntax Chapter

Nanyi

Date: July 10, 2015

Page layout is a key application of CSS.

The traditional solution for layout, based on the box model, depends on the Display property + Position property + Float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

In 2009, the website proposed a new solution----flex layout that enables easy, complete, responsive implementation of various page layouts. Currently, it has been supported by all browsers, which means that this feature is now safe to use.

The flex layout becomes the preferred solution for future layouts. This article describes its syntax, and the next article gives the flex notation for common layouts.

The following two articles are mainly referenced below: A complete guides to Flexbox and a Visual guide to CSS3 Flexbox Properties.

First, what is the flex layout?

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.

Any container can be specified as a flex layout.

. box{  Display:flex;}

Inline elements can also use the flex layout.

. box{  Display:inline-flex;}

WebKit the kernel browser, you must -webkit prefix it.

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

Note that after you set the Flex layout, the, float clear and vertical-align properties of the child elements are invalidated.

Ii. Basic Concepts

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.

The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border main start ) is called, main end The end position is called; the cross start start position of the cross end intersection axis is called, the end position is called.

The project is arranged by default along the spindle. The main spindle space occupied by a main size single item is called the occupied cross cross size -axis space.

Third, the container properties

The following 6 properties are set on a container.

Flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

3.1 Flex-direction Properties

flex-directionProperties determine the direction of the spindle (that is, the direction in which the item is arranged).

. box {  Flex-direction:row | row-reverse | column | Column-reverse;}

　　

It may have a value of 4.

Row (default): The spindle is horizontal and the starting point is on the left side. Row-reverse: The spindle is in the horizontal direction, starting at the right end. Column: The spindle is in the vertical direction, starting at the top edge. Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.

3.2 Flex-wrap Properties

By default, items are lined up in a line (also known as the "axis"). flex-wrapproperty Definition, how to wrap a line if one of the axes does not fit.

. box{  Flex-wrap:nowrap | wrap | wrap-reverse;}

It may take three values.

(1) nowrap (default): No Line break.

(2) wrap : Line break, the first line is above.

(3) wrap-reverse : Line break, the first line is below.

　

3.3 Flex-flow

flex-flowProperties are flex-direction shorthand for flex-wrap row nowrap Properties and properties, and the default value is.

. box {  flex-flow: <flex-direction> | | <flex-wrap>;}

3.4 Justify-content Properties

justify-contentproperty defines how the item is aligned on the spindle.

. box {  Justify-content:flex-start | flex-end | center | space-between | Space-around;}

It may take 5 values, and the exact alignment is related to the direction of the axis. The following assumes that the spindle is from left to right.

Flex-start (default): Left-justified flex-end: right-aligned center: centered Space-between: Justified, the interval between items is equal. Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.

3.5 Align-items Properties

align-itemsproperty defines how the item is aligned on the intersection axis.

. box {  Align-items:flex-start | flex-end | center | baseline | stretch;}

　

It may take 5 values. The specific alignment is related to the direction of the cross axis, which assumes that the intersection axis is from top to bottom.

Flex-start: The start alignment of the intersection axis. Flex-end: The end alignment of the intersection axis. Center: The midpoint alignment of the intersection axis. Baseline: The baseline alignment of the first line of text for the item. Stretch (default): If the item is not set to height or auto, it fills the height of the entire container.

3.6 Align-content Properties

align-contentProperties define the alignment of multiple axes. If the item has only one axis, this property does not work.

. box {  Align-content:flex-start | flex-end | center | space-between | space-around | stretch;}

　

This property may take 6 values.

Flex-start: Aligns with the starting point of the intersection axis. Flex-end: Aligns with the end of the intersection axis. Center: Aligns with the midpoint of the intersection axis. Space-between: aligned with the intersection axis and evenly spaced between the axes. Space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border. Stretch (default): The axis fills the entire cross axis.

Iv. Properties of the project

The following 6 properties are set on a project.

Orderflex-growflex-shrinkflex-basisflexalign-self

4.1 Order Property

orderproperty defines the order in which items are arranged. The smaller the number, the higher the alignment, and the default is 0.

. Item {  order: <integer>;}

　

4.2 Flex-grow Properties

flex-growproperty defines the magnification of the item, by 0 default, that is, if there is space left, do not zoom in.

. Item {  Flex-grow: <number>;/* Default 0 */}

　　

If all items have flex-grow properties of 1, they will divide the remaining space (if any). If an item has flex-grow a property of 2 and the other item is 1, the former occupies more than the remaining space.

4.3 Flex-shrink properties

flex-shrinkProperty defines the scale-out for the project, which defaults to 1, that is, if there is not enough space, the item shrinks.

. Item {  Flex-shrink: <number>;/* Default 1 */}

　　

If all items have flex-shrink a property of 1, they will be scaled down when there is not enough space. If an item has flex-shrink a property of 0 and the other items are 1, the former does not shrink when there is not enough space.

A negative value is not valid for this property.

4.4 Flex-basis Properties

flex-basisproperty defines the spindle space (main size) that the item occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value auto is the original size of the project.

. Item {  flex-basis: <length> | auto;/* Default auto */}

It can be set to width height the same value as a property (such as 350px), then the item will occupy a fixed space.

4.5 Flex Properties

flexThe property flex-grow is flex-shrink , flex-basis and shorthand for, the default 0 1 auto value. The latter two properties are optional.

. item {  Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]}

This property has two shortcut values auto : ( 1 1 auto ) and none ( 0 0 auto ).

It is recommended that you use this property instead of writing three separate properties separately, because the browser calculates the relevant values.

4.6 Align-self Properties

align-selfproperty allows a single item to have a different alignment than other items, overriding align-items the property. The default value auto , which represents the property that align-items inherits the parent element, is equivalent to stretch if there is no parent element.

. item {  Align-self:auto | flex-start | flex-end | center | baseline | stretch;}

　　

This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

Finish

Precautions

Original address: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Go-Flex Layout Tutorial: Syntax Chapter