Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what is the flexible layout of flex", which is easy to understand and clear. I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "what is the flexible layout of flex?"

First understanding

You must first understand the concept of flexible layout before you learn it.

Flex is the abbreviation of flexible box, which means flexible layout and is used to provide maximum flexibility for boxed models.

Any container can be specified as a flex layout

.box {display: flex;}

Of course, inline elements can also be laid out using flex

.box {display: inline-flex;}

Browsers with Webkit kernel must be prefixed with-webkit.

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

Note: when set to the Flex layout, the float, clear, and vertical-align attributes of the child elements will be invalidated.

Basic concept

Elements that use Flex layouts are called Flex containers (flex container), or "containers" for short. All its child elements automatically become container members, called Flex projects (flex item), or "projects" for short.

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

Projects are arranged along the principal axis by default. The spindle space occupied by a single project is called main size, and the cross-axis space occupied by a single project is called cross size.

Please keep in mind the above basic concepts. When you say the attributes below, you will not repeat them!

Properties Container Properties (container)

Flex-direction

Justify-content

Align-items

Flex-wrap

Align-content

Flex-flow

1.flex-direction

By default, flex items arranges flex-direction along main axis (principal axis) from main start to main end to determine the direction of main axis. There are four values: row (default), row-reverse, column, column-reverse.box {flex-direction: row | row-reverse | column | column-reverse;}.

Row (default): the principal axis is horizontal and the starting point is at the left end.

Row-reverse: the principal axis is horizontal, and the starting point is at the right end.

Column: the principal axis is vertical, and the starting point is along the upper edge.

Column-reverse: the principal axis is vertical, and the starting point is at the lower edge.

2.justify-content

Justify-content determines how flex item is aligned on main axis flex-start (default): align to main start flex-end: align to main end center: equal distance between centered space-between:flex items Align with both ends of main start and main end space-evenly: the distance between flex items is equal, the distance between flex items and main start, main end is equal to the distance between flex items, the distance between space-around: flex items is equal, and the distance between flex items and main start, main end is equal to half the distance between flex items

The main purpose of this attribute is to arrange the item position of the main axis

Of course, you can try these attributes yourself, so you won't try them all here, but note that these are all container properties and should be written in the container's css!

3.align-items

Determine how flex items is aligned on cross axis normal: in an elastic layout, the effect is the same as stretch stretch: provided that items does not set the height, and when the size of flex items in the cross axis direction is auto, it will automatically stretch to fill flex container (or in other words: if the project is not set to height or set to auto, it will occupy the height of the entire container.) Flex-satrt: align to cross start flex-end: align to cross end center: align to center baseline: align to baseline

4.flex-wrap

Determines whether the flex container is single-line or multi-line nowrap (default): single-line wrap: multi-line / / this is less used wrap-reverse: multi-line (contrast wrap,cross start to cross end)

By default, projects are arranged on a single line (also known as "axis"). The flex-wrap property defines how to wrap if an axis does not fit.

5 align-content

Determines that the alignment of multi-line flex items in cross axis is similar to that of justify-content, one of which is the horizontal axis. A control vertical axis stretch (default): similar to align-items 's stretch, when items has height, there is no effect flex-start: align with cross start flex-end: align with cross end center: align space-between:flex items with center equal distance Align with both ends of cross start and cross end space-evently: the distance between flex items is equal, the distance between flex items and cross start, cross end is equal to the distance between flex items, the distance between space-around: flex items is equal, and the distance between flex items and cross start, cross end is equal to half the distance between flex items

6 flex-flow is the abbreviation of flex-direction and flex-wrap

In other words, when you use this property, you can use the above two property values, such as: flex-flow: row wrap; (horizontal arrangement, multi-line display)

Flex project properties (item properties)

Order

Flex-grow

Flex-shrink

Flex-basis

Align-self

Flex

1 order

Order determines the arrangement order of flex items (not used much) can be set to any integer (positive integer, negative integer, 0). The smaller the value, the higher the default value is 0.

This attribute can be understood. To be honest, I haven't used it much.

2 align-self

You can override the align-items auto set by flex container through align-self (default): the align-items settings that comply with flex container stretch, flex-start, flex-end, center, baseline have the same effect as align-items

It is equivalent to inheriting the align-items attribute of the parent element, or stretch if there is no parent element.

3 flex-grow

Determines how the flex items extension can be set to any non-parent number (decimal, integer 0). The default is 0. When flex container has a remaining size in the main axis direction, the flex-grow attribute is valid if the flex-grow synthesis sum of all flex items is not more than 1, which is directly multiplied by the remaining size to be the extension size, and if it exceeds 1, the extension size= remaining size*flex-grow/sum

The flex-grow property defines the magnification of the project, which defaults to 0, that is, it is not zoomed in if there is any remaining space.

4 flex-shrink

Flex-shrink (shrink shrinks, shrinks) is similar to flex-grow. An extension and a stretch can be set to any non-parent number (decimal, integer 0). The default is 1 when flex items exceeds the size flex-shrink attribute of flex container in the main axis direction, if the total flex-shrink sum of all flex items exceeds 1. The size of each flex item contraction is: the sum of the size* shrinkage ratio of flex item exceeding flex container / the shrinkage ratio of each flex items. If the sum does not exceed 1, the size of each flex item contraction is: size = excess size* flex-shrink value flex items the final shrinking size cannot be less than min-width\ min-height

The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.

If the flex-shrink property of all projects is 1, it will be scaled down proportionally when there is insufficient space. If the flex-shrink property of one project is 0 and all other projects are 1, the former will not shrink when there is insufficient space. You can try it on your own, and finally you will give a case of dice layout!

5 flex-basis

The base size used to set flex items in the main axis direction defaults to auto. You can set a specific width value to determine the factors that determine the final base size of the flex items, with priority from high to low max-width\ max-height\ min-width\ min-height flex-basis width\ height content itself size.

The flex-basis attribute defines the principal axis space (main size) occupied by the project before allocating excess space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the item. You can also set the same width and height as width,height, indicating that item will occupy a fixed space!

6 flex

Flex is flex-grow | | flex-shink | | the abbreviation of flex-basis can be specified as 1, 2, 3 values in the above order! The default is 0 1 auto.item {flex: none | [? | |]}

Note:

The default value of this attribute is 0 1 auto (note the order), and the last two attributes are optional

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

If these three attributes are needed, it is recommended to use flex instead of separate three separate properties, because the browser will calculate the relevant values

Practice of dice layout

If you just talk and don't practice the fake handle, you can tear the code by hand.

The following use of flex to write a few dice layout, you can refer to!

# container {background-color: # CCCCCC; height: 600px; width: 500px; / * flex * / display: flex; justify-content: space-evenly Align-items: center;} .item {background-color: yellow; width: 100px; height: 100px } / * single point * / .one {/ * use flex layout for point to point * / display: flex Justify-content: center; align-items: center;} / * Point * / .item-one {display: block Height: 20px; width: 20px; background-color: # 1890FF; border-radius: 50% } / * three points * / .two {display: flex; justify-content: space-between } .two span {margin: 2px; display: block; height: 20px; width: 20px; border-radius: 50% Background-color: # 1890FF;} .two2 {align-self: center;} .two3 {align-self: flex-end } / * five points * / .three {display: flex; justify-content: space-around } .three span {display: block; height: 20px; width: 20px; border-radius: 50% Background-color: # 1890FF;} # three_one, # three_three {padding: 2px; display: flex; flex-direction: column Justify-content: space-between;} # three_two {display: flex; flex-direction: column; justify-content: center } / * six o'clock * / .four {display: flex; justify-content: space-around } .four span {display: block; height: 20px; width: 20px; border-radius: 50% Background-color: # 1890FF;} # four1,#four2 {padding: 2px; display: flex; flex-direction: column Justify-content: space-between;}

Test result

The above is all the content of the article "what is the flexible layout of flex?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.