Understand CSS3 FlexBox elastic layout in 10 minutes

Basic Introduction

Features

• Flexbox is a CSS display type that provides a simpler and more efficient layout method;
• Flexbox can position, size, and space elements relative to parent elements and sibling elements.
• Flexbox has good support for responsiveness;

How it works

If you set display property of the parent element to flex , all child elements will become flex item , which can control the arrangement, size, spacing, etc. of the child elements;

compatibility

Flex Container

Let’s first look at the simplest flex example. The outer div is set display: flex to become a flex container, and the three inner divs automatically become flex items:

html:

<div class="flex-container">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

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 floating layout, but if you use floating to implement it, you need to write more code, while flex can do it in one line.

1. Justify Content

If we want the flex item to be centered, we can add a CSS property to the flex container: justify-content , which controls the alignment of the flex item on the main axis (determined by flex-drection, horizontal by default):

.flex-container{
  ...
  justify-content: center;
}

The effect is as shown below:

In addition, justify-content can also be set to flex-start , flex-end , space-around , space-between , space-even and other values. Please experiment on your own to see the specific effect.

2. Align Items

After centering in the flex direction is achieved, centering perpendicular to the main axis (cross axis) can be achieved using 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:

Using flex solves the complex problem of vertical centering in CSS! Correspondingly, align-items also has other values ​​such as flex-start and flex-end .

3. Flex Direction

flex-direction determines the main axis direction, that is, the direction in which flex items are arranged. In addition to the default row direction, flex items can also be arranged vertically or reversely (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 becomes narrower, but want the flex item that exceeds the boundary to wrap, we can set the flex container's flex-wrap :

.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 . After setting this value, the wrapped elements will be arranged on top of other elements:

From this we can see that flex wrap can replace media query to a certain extent.

5. Flex Row

Finally, flex-direction and flex-wrap can be combined into one property flex-flow , for example: flex-flow: row-reverse wrap .

Flex Item

1. Flex Grow

In all the examples above, the three flex items only occupy a small part of the flex container. If we want the flex item to fill the flex container, we need to set flex-grow attribute for the flex item. As the name suggests, grow means growth and is used to control the extension of the size of 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 their flex-grow is 1 at this time. 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 time, the sizes of two and three remain unchanged, while one occupies the remaining space of the parent element.

If we change 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 that of two and three, so the size of the flex item is proportional to the value of flex-grow .

2. Flex Shrink

The opposite of flex-grow is flex-shrink flex-shrink , which is used to control the compression of sub-elements after the size of the sub-elements exceeds the flex container. See the example:

Change the width of the box to 1/3 of the flex container, and flex-shrink of one, two, and three are 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 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 becomes 540px, the child elements are compressed to varying degrees. The compressed widths of one, two, and three are 250px, 180px, and 110px respectively. So compared to the initial width of 320px, the compressed widths are 70px, 140px, and 210px respectively. 70 : 140 : 210 = 1 : 2 : 3 , which is inversely proportional to the value of flex shrink. In fact, the compression rate is also related to the initial size of the flex item, but when the initial size is the same, its impact is ignored.

Assuming that flex shrink is fs , the initial size of the flex item is is , and the compressed size of the flex item 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 we need to add a flex-basis when we already have width and height? The differences between flex-basis and width/height are as follows:

1. flex-basis can only be used for flex-items, while width/height can be applied to other types of elements;
2. flex-basis is related to flex-direction. When flex-direction is row, flex-basis sets the width. When flex-direction is column, flex-basis sets the height.
3. When a flex item is absolutely positioned, flex-basis does not work, but width/height does.
4. flex-basis can be used as a shorthand form of flex, such as: flex: 1 0 200px;

Let's take a look at the role of flex-basis and modify the 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 items have the same width added to their initial width:

Of course, this example will have the same effect if width is used instead. However, although the effect is the same, the meaning is different. Therefore, when using flex layout, you should try to follow the specifications and choose the right person to do the right thing.

4. Order

Through order attribute we can change the order of flex items, for example:

html:

<section id="blocks">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</section>

CSS:

#blocks{
  display: flex;
  margin: 10px;
  justify-content: space-between;
}

#blocks div{
  flex: 0 0 100px;
  padding: 40px 0;
  text-align: center;
  background: #ccc;
}

The default order is based on the order in which the flex items appear in the HTML:

When we modify the order value of the flex item, the flex item will be arranged in ascending order according to the order value:

CSS:

.one{ order: 4; }
.two{ order: 3; }
.three{ order: 2; }
.four{ order: 1; }

Effect:

Conclusion

This is a brief introduction to flex. Flex is very powerful and simple. I hope you will enjoy using it.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.