Flexbox and flexbox Layout

Flexbox and flexbox Layout
I. Basic Knowledge

Flexbox layout is officially called the CSS Flexible Box layout module. It is a new layout mode in css3. Flexbox can control the alignment, direction, and order of unknown container elements, even in containers of unknown sizes. The main feature of a Flex container is the ability to modify the width or height of its child elements (Flex items) so that they can fill available space in different screen sizes.

 

Spindle and spindle direction

The User Agent configures a scaling project along the main axis of a scaling container. The main axis is an extension of the main axis.

Spindle start point and spindle end point

The configuration of the scaling project starts from the Start side of the main axis of the container and ends with the end side of the main axis.

Spindle length and spindle length attributes

The width or height of a scaling project in the spindle direction is the spindle length of the project, and the spindle Length attribute of the scaling project is 「 width"Or 「 height"Attribute, which determines the direction to the main axis.

Side axis and side axis direction

The axis perpendicular to the spindle is called the side axis, which is an extension of the side axis.

Ii. flex container attributes flex-direction

This is used to create a square axis to define the direction in which the Flex project is placed in the Flex container. Flexbox is a single-direction Layout Concept. Flex projects are arranged either horizontally or vertically.

1 .container {2   flex-direction: row | row-reverse | column | column-reverse;3 }

• row(Default ):If the writing method isltr, Flex projects are arranged from left to right. If the writing method isrtl, The Flex project is arranged from right to left
• row-reverse:If the writing method isltr, The Flex project is arranged from right to left. If the writing method isrtl, The Flex project is arranged from left to right.
• column:AndrowSimilar, but the direction is arranged from top to bottom.
• column-reverse:Androw-reverseSimilar, but the direction is arranged from bottom up

flex-wrap

By default, Flex projects are displayed in one row as much as possible. You canflex-wrapTo display the Flex project in multiple rows. This also plays an important role in determining the direction of stacking a new row.

1 .container{2   flex-wrap: nowrap | wrap | wrap-reverse;3 }

• nowrap(Default ):Single Row display. If the writing mode isltr, Flex projects are arranged from left to right, and vice versartl, Arranged from right to left
• wrap:Multi-line display, if the writing mode isltr, Flex projects are arranged from left to right, and vice versartl, Arranged from right to left
• wrap-reverse:Multi-line display, if the writing mode isltr, Flex projects are arranged from right to left, and vice versartl, Arranged from left to right

flex-flow(Applicable to flex container elements)

This isflex-directionAndflex-wrapThe abbreviations of the two attributes. The two attributes determine the main axis and the side axis of the scaling container. The default value isrow nowrap(Separated by spaces ).

1 flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

Used to align a scaling project on the spindle. This line will be performed after all the Scalable lengths and all auto margins are interpreted. When all scaling projects on a row cannot be scaled or scaled but the maximum length is reached, the extra space will be allocated. When a project overflows a line, this attribute also applies some control to the project alignment.

1 .container {2   justify-content: flex-start | flex-end | center | space-between | space-around;3 }

• flex-start(Default ):The scaling project is aligned with the starting position of a row. The margin of the first scaling item at the starting edge of the spindle is aligned with the line at the starting edge of the spindle, and all subsequent scaling items are aligned with the previous item.
• flex-end:The scaling project is aligned with the end position of a row. The margin of the last scaling item in the row at the end of the spindle is aligned with the row at the end of the spindle, and all the preceding scaling items are aligned with the last item.
• center:The scaling project is aligned to the middle of a row. The scaling items for this row are aligned and centered in the row, at the same time, the distance between the first item and the row's edge at the starting point of the spindle is equivalent to the distance between the last item and the row's edge at the end point of the spindle (if the remaining space is negative, the overflow length at both ends is equal ).
• space-between:The scaling project is evenly distributed in the row. This value is equivalentflex-start. In other cases, the margin of the first item at the start side of the spindle will be aligned with the edge of the row at the start of the spindle, at the same time, the margin of the last item at the end of the spindle is aligned with the row at the end of the spindle, while the remaining scaling items are evenly distributed to ensure that the blank space between the two is equal.
• Space-around:The scaling project is evenly distributed in the row, with half of the space reserved at both ends. This value is equivalentcenter. In other cases, the scaling project ensures that the blank space between the two is equal, and the space before the first element and the space after the last element are evenly distributed half of the other blank space.

align-items

The scaling project can be aligned on the side axis of the current row of the scaling container, which is similarjustify-contentAttribute, but it is in another direction.align-itemsIt can be used to set the alignment of all projects in the scaling container that include anonymous scaling projects.

1 .container {2   align-items: flex-start | flex-end | center | baseline | stretch;3 }

• flex-start:The outer margin of the scaling project's start edge on the side axis is close to the start edge of the line on the side axis.
• flex-end:The outer margin of the scaling project's end edge on the side axis depends on the edge of the row at the end of the side axis.
• center:The margin box of the scaling project is centered on the side axis of the row. (If the size of the scaling row is smaller than that of the scaling project, the scaling project will overflow the same amount in both directions ).
• baseline:If the line axis and side axis of the scaling project are the sameflex-startEquivalent. In other cases, this value is used for baseline alignment. All scaling projects involved in this alignment are arranged in the following way: first, alignment the baselines of these scaling projects, then, the item with the longest margin from the baseline to the start edge of the side axis is placed close to the edge of the row at the start of the side axis.
• stretch:If the value of the side axis length attribute isauto, This value will make the size of the project's margin box complymin/max-width/heightThe size of the row to which the attribute belongs is as close as possible.

align-content

When the side axis of the scaling container has extra space,align-contentAttributes can be used to adjust the alignment of a scaling row in a scaling container.justify-contentProperties are similar.

Note:This attribute has no effect on Scaling containers with only one row.

1 .container {2   align-content: flex-start | flex-end | center | space-between | space-around | stretch;3 }

• flex-start:Each row is stacked to the starting position of the scaling container. The edges of the first line at the start of the side axis in the scaling container are close to the edges of the scaling container at the start of the side axis, and each row after the start is close to the front line.
• flex-end:Each row is stacked at the end of the scaling container. The last line of the scaling container at the end of the side axis is close to the side of the scaling container at the end of the side axis, and each line is close to the last line.
• center:Each row is stacked to the middle of the scaling container. Each row is aligned in the center of the scaling container, make sure that the distance between the content side and the first line of the starting edge of the side axis of the scaling container is the same as that between the content side of the end edge of the side axis and the last line of the container. (If the remaining space is negative, the row stack will overflow the same distance to the two directions .)
• space-between:Each row is evenly distributed in a scaling container. This value is equivalentflex-start. In other cases, the edges of the first line at the start of the side axis are close to the content edges of the scaling container at the start of the side axis, the last line at the end of the side axis is placed close to the content edge of the scaling container at the end of the side axis, and the remaining rows are arranged with equal space between the two.
• space-around:Each row is evenly distributed in the scaling container, with half of the space on both sides. This value is equivalentcenter. In other cases, the rows are arranged with equal space between the two rows, and the space at the beginning and end of the first row is half of the space of the other rows.
• stretch:Each row is stretched to occupy the remaining space. If the remaining space is negative, this value is equivalentflex-start. In other cases, the remaining space is evenly divided by all rows to expand the side axis size of each row.

Iii. Flex Project Properties order

By default, Flex projects are arranged in the stream order of the document source. However, in the Flex containerorderAttribute to control the sequence source of the Flex project.

AccordingorderRe-sort the scaling project. Minimum (maximum negative value)orderThe first scaling project. If multiple projects have the sameorderValues. These items are sorted by file order. This step affects the sequence of boxes generated by the scaling project, and also affects how the algorithm behind each project is processed.

.item { order: <integer>; }

flex-grow

If necessary,flex-growYou can define an extended proportion of a Flex project. It accepts a value with no unit as a proportion. It can use the Flex project to fully occupy the space available for the Flex container.

Ifflex-growSet1The Flex items in the Flex container have equal sizes. If you configure one of the Flex Projectsflex-growIs2The size of this Flex project will be twice that of other Flex projects.flex-growThe value is1).

.item {  flex-grow: <number>; /* default 0 */}

Note:flex-growNegative values are invalid.

flex-shrink

If necessary,flex-shrinkYou can define the scale-down ratio of a Flex project.

1 .item {2   flex-shrink: <number>; /* default 1 */3 }

 

Note:flex-shrinkNegative values are invalid.

flex-basis

flex-basisProperty defines a default size for a Flex project before the free space of the Flex container is allocated.main-sizeValue to make it have the matching width or height, but it must depend onflex-direction.

1 .item {2   flex-basis: <length> | auto; /* default auto */3 }

If it is set0, Content is not considered for additional space. If it is setauto, The additional space will be based onflex-growValue Distribution

align-self

align-selfThe default alignment is used to override a single scaling project. (For anonymous scaling projects,align-selfThe valuealign-items.)

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

If the margin on any side axis of the scaling project isauto, Thenalign-selfNo effect.

Ifalign-selfIsautoIs calculated as the parent element of the element.align-itemsValue. If the element does not have a parent element, the calculated value isstretch. Alignment attribute values are defined as follows:

• flex-start:The outer margin of the scaling project's start edge on the side axis is close to the start edge of the line on the side axis.
• flex-end:The outer margin of the scaling project's end edge on the side axis depends on the edge of the row at the end of the side axis.
• center:The margin box of the scaling project is centered on the side axis of the row. (If the size of the scaling row is smaller than that of the scaling project, the scaling project will overflow the same amount in both directions ).
• baseline:If the line axis and side axis of the scaling project are the sameflex-startEquivalent. In other cases, this value is used for baseline alignment. All scaling projects involved in this alignment are arranged in the following way: first, alignment the baselines of these scaling projects, then, the item with the longest margin from the baseline to the start edge of the side axis is placed close to the edge of the row at the start of the side axis.
• stretch:If the value of the side axis length attribute isauto, This value will make the size of the project's margin box complymin/max-width/heightThe size of the row to which the attribute belongs is as close as possible.
• Note: If the height of a scaling project is limited, the content of the scaling project may overflow.

Iv. Attribute version

 

 

Standard version

Turn on flexbox: turn an element into a scaling container

Spindle alignment mode: Specify the alignment mode of the scaling project along the spindle.

Side axis alignment: Specify the alignment mode of the scaling project along the side axis.

Horizontal axis alignment of a single scaling Project

Scaling project line alignment: Specifies the alignment of scaling project lines on the side axis.

Display order: Specify the order of scaling items

Scalability: specify how the scaling project scales.

Scaling stream: Specify the scaling flow direction of the main axis of the scaling container

Line feed: determines whether the scaling project is arranged along the side axis

 

Reference self-http://www.w3cplus.com/blog/tags/157.html