Flexible layout (Flex layout) and flexible flex Layout

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.