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

This article mainly explains "what is CSS3 FlexBox". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is CSS3 FlexBox".

Basic introduction

Characteristics.

Flexbox is a type of css display that provides a simpler and more efficient layout.

Flexbox can position the element relative to the parent element and sibling element, control the size and control the spacing

Flexbox has good support for responsiveness.

working principle

If the display attribute of the parent element is set to flex, the child elements will become flex item, thus the arrangement, size and spacing of the child elements can be controlled.

Compatibility

Flex Container

Let's take a look at the simplest example of flex. The outer div sets display: flex to become a flex container, and the inner three div automatically become flex item:

Html:

Css:

.flex-container {max-width: 960px; margin: 0 auto; display:flex;}

.box {height: 100px; min-width: 100px;}

.one {background: pink;}

.two {background: lightgreen;}

.three {background: skyblue;}

Effect:

The effect is similar to a floating layout, but you need to write more code if you implement it with a float, and flex is done on one line.

1. Justify Content

If we want flex item to be centered, we can add a css attribute to flex container: justify-content, which controls the alignment of flex item in the principal axis direction (main axis, determined by flex-drection, default is horizontal):

. flex-container {

...

Justify-content: center

}

The effect is as shown in the figure:

In addition, justify-content can also be set to flex-start, flex-end, space-around, space-between, space-even, etc. Please experiment on the specific effect.

2. Align Items

After realizing the centering of the flex direction, the centering of the direction perpendicular to the principal axis (cross axis) can be realized by align-items.

Css:

. flex-container {

Max-width: 960px

Margin: 0 auto

Display:flex

Justify-content: center

Height: 200px

Background-color: white

Align-items: center

}

Effect:

The use of flex to solve the previous css vertical center to achieve the complex problem! Accordingly, align-items also has other values such as flex-start, flex-end, and so on.

3. Flex Direction

Flex-direction determines the direction of the principal axis, that is, the direction of flex item arrangement. In addition to the default row direction, you can also row-reverse/column-reverse the flex item longitudinally and row-reverse/column-reverse:

Css:

. flex-container {

...

Flex-direction: column

Align-items: center

}

Effect:

4. Flex Wrap

If we don't want to compress the flex item when the window narrows, but let the flex item beyond the boundary wrap, then we can set the flex-wrap of the flex container:

. flex-container {

Max-width: 960px

Margin: 0 auto

Display:flex

Flex-wrap: wrap

}

.box {

Height: 100px

Min-width: 300px

Flex-grow: 1

}

When we compress the window, the effect is as follows:

Flex wrap also has a value: wrap-reverse. When this value is set, the elements that are wrap will be listed above other elements:

It can be seen that flex wrap can replace media query to some extent.

5. Flex Row

Finally, flex-direction and flex-wrap can be merged into a single attribute flex-flow, such as: flex-flow: row-reverse wrap.

Flex Item

1. Flex Grow

In all the above examples, the three flex item only take up a small part of the flex container space, and if we want flex item to fill the flex container, we need to set the flex-grow property for flex item. As the name implies, grow means growth and is used to control the extension of the size of the flex item.

Modify the css to:

.box {

Height: 100px

Min-width: 100px

Flex-grow:1

}

Effect:

You can see that the three child elements divide the space of the parent element equally, because at this time their flex-grow is 1. What if only one child element has flex-grow set?

Css:

.box {height: 100px; min-width: 100px;}

.one {background: pink; flex-grow: 1;}

Effect:

At this point, the size of two and three remains the same, while one occupies the remaining space of the parent element.

If you change the flex-grow of one to 2 and two and three to 1, let's see what happens:

Css:

.box {height: 100px; min-width: 100px; flex-grow:1;}

.one {background: pink; flex-grow: 2;}

Effect:

You can see that the width of one has become twice the width of two and three, so the size of flex item is proportional to the value of flex-grow.

2. Flex Shrink

As opposed to flex-grow is flex-shrink, flex-shrink is used to control the compression of child elements when the size of the child element exceeds flex container. Take a look at the example:

The width of the modified box is changed to the width of flex container. The flex-shrink of one, two, and three is 1, 2, and 3, respectively.

.box {height: 100px; width: 320px;}

.one {background: pink; flex-shrink: 1;}

.two {background: lightgreen; flex-shrink: 2;}

.three {background: skyblue; flex-shrink: 3;}

When the window is of normal size, the effect is as follows:

When we compress the window to make it narrower, the effect is as follows:

When the flex container width changes to 540px, the child elements are compressed to varying degrees. The widths of the compressed one, two and three are 250px, 180px and 110px respectively, so compared with the initial width, the compressed width of 320px is 70px, 140px, 210pxMagi 70: 140210 = 1: 2: 3, which is inversely proportional to the value of flex shrink. In fact, the compression ratio is also related to the initial size of the flex item, but the effect is ignored when the initial size is the same.

Assuming that flex shrink is fs,flex item, the initial size is is,flex item, and the compressed size is ss, the correct expression is:

Fs ∝ is/ss

3. Flex Basis

Flex-basis is used to set the initial width / height of the flex item. Why do you need to add a new flex-basis when you have width and height? There are the following differences between flex-basis and width/height:

Flex-basis can only be used with flex-item, while width/height can be applied to other types of elements

Flex-basis is related to flex-direction. When flex-direction is row, flex-basis sets width, and when flex-direction is column, flex-basis sets height.

When flex item is absolutely located (absolute position), flex-basis does not work, while width/height can

Flex-basis can be used in the abbreviated form of flex, such as flex: 1 0 200px

Let's take a look at the role of flex-basis and modify css as follows:

.box {

Height: 100px

Flex-grow: 1

}

.one {

Background: pink

Flex-basis: 100px

}

.two {

Background: lightgreen

Flex-basis: 200px

}

.three {

Background: skyblue

Flex-basis: 300px

}

All three flex item add the same width based on the original initial width:

Of course, this example will have the same effect if you switch to width, but the effect is the same but the meaning is different, so you should try to follow the specification when using flex layout and choose the right person to do the right thing.

4. Order

We can change the order of the flex item through the order property, for example:

Html:

one

two

three

four

Css:

# blocks {

Display: flex

Margin: 10px

Justify-content: space-between

}

# blocks div {

Flex: 00 100px

Padding: 40px 0

Text-align: center

Background: # ccc

}

The default order is the order in which flex item appears in html:

When we change the order value of flex item, the flex item is sorted in ascending order:

Css:

.one {order: 4;}

.two {order: 3;}

.three {order: 2;}

.four {order: 1;}

Thank you for your reading, the above is the content of "what is CSS3 FlexBox", after the study of this article, I believe you have a deeper understanding of what CSS3 FlexBox is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.