[Turn] About Flexbox

Flexbox, a CSS3 layout pattern, also known as the elastic box model, is used to provide maximum flexibility for boxed models.

First of all to lift a chestnut, before we are so implemented a div box horizontally vertically centered. When you know the object is wide, the absolute percent of the center element is positioned and then implemented by margin offset.

<style>

. container{

width:600px;

height:400px;

border:1px solid #000;

position:relative;

}

. box{

width:200px;

height:100px;

border:1px solid #000;

Position:absolute;

left:50%;

top:50%;

Margin-left: -100px;

margin-top:-50px;

}

</style>

<div class= "Container" >

<div class= "box" ></div>

</div>

If Flex is used, it is simple to implement, does not need to be counted by itself, and does not require absolute positioning, just by defining two properties on the telescopic container, Justify-content defines the alignment of the scaling project along the spindle line as center, Align-items defines the alignment of the telescopic project on the side axis (perpendicular to the spindle) as center, as follows:

<style>

. container{

width:600px;

height:400px;

border:1px solid #000;

Display:flex;

Justify-content:center;

Align-items:center;

}

. box{

width:200px; The width can be any

height:100px; The height can be any

border:1px solid #000;

}

</style>

<div class= "Container" >

<div class= "box" ></div>

</div>

In fact, the outstanding characteristics of flexbox is not this, first of all, a map of its properties ~

First, let's analyze this diagram, from the first child node you can see that the Flexbox consists of a flex container and a flex project, the container is the parent element, and the project is the child element. Some of the relationships between them can be expressed in this way:

This diagram can be used in the next attribute analysis.

Flex Container

Display:flex

When we use the Flexbox layout, we need to locate the flex (block level) or Inline-flex (inline level) for the display value of the parent container first.

When this value is used, the scaling container creates a new scalable format context (FFC) for the content, which has the same contextual effect as the BFC root (BFC feature: Floats do not break into the telescopic container, and the boundaries of the telescopic container do not overlap its content boundaries).

The telescopic container is not a block container, so some of the properties that are designed to control the block layout are not applicable in the scaling layout, especially the multiple columns (column), which float,clear,vertical-align these properties.

Flex-direction

The [Flex-direction] property is used to control the direction of the spindle in the telescopic container, and also determines the direction of the telescopic project.

Flex-direction:row is also the default value, i.e. the direction of the spindle is the same as the normal direction, arranged from left to right.

Flex-direction:row-reverse, in contrast to row, is arranged from right to left.

Flex-direction:column from top to bottom.

Flex-direction:column-reverse: From bottom to top. The above is only for the Ltr writing method, the opposite of RTL.

The page shows the following results:

Flex-warp

The [Flex-wrap] property controls whether the telescopic container is a single row or multiple rows, and also determines the direction of the side axis (the stacking direction of the new row).

flex-wrap:nowrap; Telescopic container single line display, default value;

Flex-wrap:wrap; telescopic container multi-line display; The order of each row of a telescopic item is arranged from top to bottom.

Flex-wrap:wrap-reverse; The telescopic container is displayed in multiple rows, but the order of each row of the telescopic item is arranged from bottom to top.

Web page effect See Figure;

Flex-flow

The [Flex-flow] property is abbreviated for flex-direction (spindle direction) and flex-wrap (side axis direction), and two properties determine the spindle and side axis of the telescopic container.

flex-flow:flex-direction; The default value is row nowrap;

Lift two chestnuts:

Flex-flow:row; is also the default value; The spindle is in line direction, single-line display, do not wrap;

Flex-flow:row-reverse wrap; The spindle is in the opposite direction from the inside of the line, right to left, and each line of the item is arranged from top to bottom (side axis).

The page works as follows:

Here you can try different combinations on your own.

Justify-content

[Justify-content] is used to define the alignment of the telescopic item above the spindle, and this property allocates extra space when all the scaling items on a row are not scalable or scalable but have reached their maximum length. This property also imposes some control on the alignment of the item when the item overflows a row.

Justify-content:flex-start; The telescopic project aligns to the starting position of the spindle, and each subsequent element is aligned next to the previous element.

Justify-content:flex-end; The telescopic project aligns to the end of the spindle, and each of the preceding elements is aligned next to each other.

Justify-content:center; The telescopic items are aligned to each other and centered on the spindle, and the distance from the first element to the beginning of the spindle is equal to the last element to the end of the spindle. All of the above 3 are "bundled" in a separate left, right, and center alignment.

Justify-content:space-between; The scaling project is evenly distributed on the spindle, and the first element and the starting point of the spindle are close to each other, the last element and the end of the spindle are close to each other, and the rest of the telescopic items are equally divided to ensure that 22 intervals are equal.

Justify-content:space-around; The telescopic items are evenly distributed above the spindle, and the first element is equal to the distance from the beginning of the spindle and the last element to the end of the spindle, and is equal to half the spacing of the intermediate element 22. Perfect average distribution, this layout is common in the Ali system.

Let's see if the demo is quick to understand:

Align-items

[Align-items] is used to define the alignment of the telescopic item on the side axis, which is similar to the [Justify-content] property, but is another direction. (Flex-directon and Flex-wrap are a pair, justify-content and Align-items are a pair, the former defines the direction of the spindle and the side axis respectively, which defines the alignment of the project in the spindle and the side axis, respectively).

Align-items:flex-start the outer margin of the start edge of the side axis is close to the edge of the line at the beginning of the side axis.

Align-items:flex-end; The telescopic item is at the edge of the side end of the lateral axis by the margin of the line at the end of the side axis.

Align-items:center; the outer margin of the telescopic project is centered on the side axis.

Align-items:baseline the value is equivalent to [Flex-start] if the inline axis of the Flex project is the same as the side axis. In other cases, the value will participate in the baseline alignment.

Align-items:stretch; The telescopic project stretches the entire telescopic container. This value causes the size of the outer box of the project to be as close to the size of the row as possible, following the limits of the "min/max-width/height" property.

The following demo shows only the chestnuts of center and stretch, and several others can refer to Flex-start and flex-end.

Align-content

The [Align-content] property can be used to adjust the alignment of the telescopic row in the telescopic container, similar to the [Justify-content] property for aligning the scaling item on the spindle. Only the element here is in one line. Note that this property has no effect on a single row of telescopic containers. When using Flex-wrap:wrap, the multi-line effect comes out.

Align-content:flex-start | | Flex-end | | Center | | Space-between | | Space-around | | Stretch

Align-content:stretch; The default value, the rows will stretch to occupy the remaining space.

Others can refer to [justify-content] usage.

Specific images to http://w3.org official documents;

Too troublesome. Can't write down, fall.

Flex Project

Finally wrote about the scaling project related properties, mainly 3, Order,flex (flex-grow,flex-shrink,flex-basis combination), align-self; used to compare more is the first two.

Order

Order controls the sequence in which the scaling items are displayed in the telescopic container, and the scaling items in the telescopic container begin with the lowest ordinal, with a default value of 0.

There is a use more, want to set up a group of two elements one row first, the other row finally, the Lord needs to be the first order:-1; the other is order:0; that's fine.

For example, we want to control a container 4 box, want to box4 as a display, box1 for the last display. That's all you need.

<style>

. container{

Display:flex;

}

. box1{

order:1;

}

. box4{

Order:-1;

}

</style>

<div class= "Container" >

<div class= "Box1" >1</div>

<div class= "Box2" >2</div>

<div class= "Box3" >3</div>

<div class= "Box4" >4</div>

</div>

The display looks like this:

Flex

The Flex property can be used to specify a part with a retractable length, a flex-grow (scaled scale), a flow-shrink (contraction scale), a flex-basis (scaling reference value), an abbreviation for the three properties, It is recommended that you use these 3 attributes in an abbreviated manner instead of alone.

Flex:none | [< ' flex-grow ' >?< ' flew-shrink ' > | | < ' flow-basis ';]

Flex-grow is a must flex-shrink and flow-basis is optional

flex-grow:<number>; where number as the scale, no units, the initial value is 0, mainly used to determine how much space the expansion container's remaining space should scale.

flex-grow:<number>; where number as a contraction ratio, no unit, the initial value is 1, that is, the remaining space is negative when the scaling project relative to the expansion of other telescopic items can shrink the proportion of space, when the contraction ratio will be [ Flex-basis] Scaling reference value weighted.

flex-basis:<length>|auto; default is auto, which calculates the starting value of the spindle length of the telescopic project before the distribution of the remaining space is calculated based on the scaling ratio. If this part is omitted from the "flex" abbreviation, the specified value of "flex-basis" is the length zero.

The Flex-basis diagram shows that this is the case:

Align-self

[Align-self] is used to overwrite the default alignment on a separate scaling project, which is used to override the scaling container properties align-items the alignment of each row. This means that the two values are equal by default.

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

My point of view

Having talked so much about their use, let's take a look at the compatibility of flexbox layouts.

Specific people can see this site: Caniuse

On the PC side is actually very optimistic, basically the mainstream browser has been compatible with the use of flex, but to the mobile side is not so good, especially the domestic browser, considering the UC browser accounted for the big head, but UC see only compatible with the oldest version of Flex, that is, the 2009 version, That is display:box; many of the outstanding features of Flex are now incompatible with it, so it is advisable to use the 2009 version if the 2009 version can meet the development requirements when using it, so that the risk is even smaller.

However, if you want to be compatible with multiple browsers, you can use the graceful downgrade, here is recommended a scss sass-flex-mixin, so you can use the latest wording, and compatible with most browsers.

Believe that the Flexbox layout will be used more and more in the future mobile end.

Reprint: tw93--My understanding of the Flexbox layout pattern

[Turn] About Flexbox