Flexible layout (Flex layout) and flexible flex Layout

Flexible layout (Flex layout) and flexible flex Layout

I. Elastic Layout

A good website has a layout that makes users look comfortable. The layout of a website also affects the page views more or less. After reading the blog of the great god, I want to organize the flexible layout.

We usually use the following layout types:

1. Floating + Positioning

2. Adaptive (percentage)

3. Responsive Layout

4. Flexible layout (Flex layout)

 

What we want to organize today is a commonly used elastic layout, but block labels are different from intra-row block labels.

div{    display:flex;}
input{
　　display:inline-flex;
}

Of course, not all things can be liked by everyone like money. It also has its own advantages and disadvantages.

Advantage: Compatibility supports all browsers (Webkit kernel browsers must be added-webkit-), Which can be adjusted according to your preferences. You can specify any container as a Flex layout.

Disadvantages: the elastic layout is adjustable, so there is a huge possibility that it takes a lot of time to adjust; some elastic design requires a separate style for IE6, ...... How many people are using IE6 B.

Note: When we use an elastic layout, float, clear, and vertical-align in CSS will become invalid.

Ii. Attributes of elastic Layout

The first is the attributes of containers for Elastic layout.

　　1. flex-direction attributes

 

Flex-direction determines the container direction.

div {  flex-direction: row | row-reverse | column | column-reverse;}

The four values are: row (default) from left to right, row-reverse from right to left, column from top to bottom, and column-reverse from bottom to top.

 

　　2. flex-wrap attributes

 

By default, the layout is usually in the same row. When the flex-wrap attribute is set, the unordered content is automatically wrapped.

div{  flex-wrap: nowrap | wrap | wrap-reverse;}

The four values are: nowrap (default value), wrap, and wrap-reverse.

 

　　3. flex-flow attributes

 

The flex-flow attribute is short for the preceding two attributes. The default value isrow nowrap。

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

　　

　　4. justify-content Attributes

 

The justify-content attribute defines the alignment in the container direction.

div {  justify-content: flex-start | flex-end | center | space-between | space-around;}

　　flex-start(Default Value): Align to the left.

　　flex-end: Align to the right.

　　center: Center alignment.

　　space-between: The two ends are aligned. Each sub-element is separated by an equal distance. The sub-element and the container border are not separated.

　　space-around: The intervals between the two sides of each child element are equal. The interval between child elements is twice the interval between child elements and the container border.

 

　　5. align-items attributes

 

The align-items attribute defines the alignment in the vertical container direction.

div {  align-items: flex-start | flex-end | center | baseline | stretch;}

　　flex-start: The starting point of the vertical direction.

　　flex-end: End Point alignment in the vertical direction.

　　center: The midpoint alignment in the vertical direction.

　　baseline: Align with the baseline of the text in the first child element.

　　stretch(Default Value): If the height of the sub-element is not set or the height is set to auto, it will occupy the height of the entire container.

 

　　6. align-content Attributes

 

The align-content attribute defines the alignment of child elements in two directions.

div {  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

　　flex-start: The starting point of the vertical direction is aligned when the sub-elements in the container direction are filled.

　　flex-end: When the sub-element in the direction of the container is filled, It is aligned with the end point in the vertical direction.

　　center: When the sub-elements in the direction of the container are filled, the sub-elements are aligned with the midpoint in the vertical direction.

　　space-between: When the sub-elements in the direction of the container are filled, the two ends of the vertical direction are aligned and the equal distance between the sub-elements is separated.

　　space-around: The intervals between the two sides are equal. Therefore, the interval between axes is twice the interval between axes and borders.

　　stretch(Default): fill the entire vertical direction.

 

The following describes the attributes of neutron elements in an elastic layout container.

　　1. order attribute

 

The order attribute defines the ordering order of sub-elements.

 

.son {  order: <integer>;}

 

　　

　　2. flex-grow attributes

 

The flex-grow attribute defines the scale-in ratio of child elements. The default value is 0.

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

If this attribute is set to 1 for all child elements, all spaces are classified. If n times is set for a child element separately, the child element occupies n times more space than other child elements.

　　

　　3. flex-shrink attributes

 

The flex-shrink attribute defines the scale-down ratio of sub-elements. The default value is 1.

.son {  flex-shrink: <number>; /* default 1 */}

This attribute is set to 1 for all child elements. When the space is insufficient, all child elements will be scaled down equally to divide all spaces. If a child element is set to 0 separately, the child element will not be reduced when the space is insufficient.

　　

　　4. flex-basis attributes

 

This attribute defines the space occupied by a child element when it is allocated space. It can be set to the same value as its width and height attribute, so it will be allocated a fixed space size.

　　

　　5. flex attributes

 

This property isflex-grow,flex-shrinkAndflex-basis.

 

　　6. align-self attributes

 

This attribute allows you to set sub-elements that are not aligned with other sub-elements and overwrite the align-items attribute.

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

Auto: Default Value, indicating that the align-items attribute of the parent level is inherited by default.

　　flex-start: The starting point of the vertical direction.

　　flex-end: End Point alignment in the vertical direction.

　　center: The midpoint alignment in the vertical direction.

　　baseline: Align with the baseline of the text in the first child element.

　　stretch(Default Value): If the height of the sub-element is not set or the height is set to auto, it will occupy the height of the entire container.