10 minutes to understand CSS3 FlexBox

  css3, flex, flexbox, html

Basic introduction

Characteristics

  1. Flexbox is a css display type that provides a simpler and more efficient layout.
  2. Flexbox can position, control size, and control spacing of elements relative to parent and sibling elements.
  3. Flexbox has good support for responsive style.

Working principle

The that sets the parent elementdisplayThe property isflexThe child elements all becomeflex itemIn this way, the arrangement, size and spacing of sub-elements can be controlled.

Compatibility

image

Flex Container

Let’s look at the simplest flex example, the outer div setting.display: flexBecomes a flex container, and the internal 3 divs automatically become flex item:

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:

image

The effect is similar to floating layout, but if floating is used, more code needs to be written, and flex can do it in 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 main axis (determined by Flex-D Correction, which defaults to the horizontal direction):

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

The effect is as follows:

image

In addition tojustify-contentIt can also be set toflex-start,flex-end,space-around,space-between,space-evenEquivalent, the specific effect please experiment.

2. Align Items

After centering in flex direction is realized, centering perpendicular to the cross axis can be usedalign-itemsImplementation.

css:

.flex-container{
max-width: 960px;
margin: 0 auto;
display:flex;
justify-content: center;
height: 200px;
background-color: white;
align-items: center;
}

Effect:

image

Flex solves the complicated problem of css vertical centering in the past! Correspondingly,align-itemsin additionflex-start,flex-endOther values such as.

3. Flex Direction

flex-directionDetermines the main axis direction, which is the flex item alignment direction, except for the defaultrowIn addition to the direction, flex item can be arranged vertically and reversely (row-reverse/column-reverse):

css:

.flex-container{
 ...
 
 flex-direction: column;
 align-items: center;
 }

Effect:

image

4. Flex Wrap

If we don’t want to compress flex item when the window narrows, but instead let flex item that exceeds the boundary wrap, then we can set flex container’sflex-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:
image

Flex wrap has another value:wrap-reverseWhen this value is set, the wrapped element will be listed above the other elements:

image

Therefore, flex wrap can replace media query to some extent.

5. Flex Row

Finally,flex-directionAndflex-wrapCan be merged into one attributeflex-flowFor example:flex-flow: row-reverse wrap.

Flex Item

1. Flex Grow

In all the above examples, the three flex items occupy only a small part of the flex container space, and if we want flex item to occupy the flex container, we need to set flexitem.flex-growProperty. As the name implies, grow means growth and is used to control the extension of flex item’s size.

Modify css to:

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

Effect:

image

You can see that the three child elements divide the space of the parent element equally, because at this time theirflex-growBoth are 1. If only one child element is setflex-grow?

css:

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

Effect:

image

At this time, the sizes of two and three remain unchanged, while one occupies the remaining space of the parent element.

If one’sflex-growChange 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:

image

As you can see, the width of one has become twice that of two and three, so the size of flex item andflex-growIs proportional to the value of.

2. Flex Shrink

Andflex-growIn contrastflex-shrink,flex-shrinkUsed to control the compression of sub-elements when their size exceeds flex container. Look at the example:

Modify the width of box to be 1/3 of flex container, one, two, threeflex-shrink1,2,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:

image

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

image

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

Suppose flex shrink isfs, the initial size of flex item isis, flex item is compressed toss, the correct expression is:

fs ∝ is/ss

3. Flex Basis

Flex-basis is used to set the initial width/height of flex item. Why do we need to add another flex-basis when we have width and height? Flex-basis and width/height differ as follows:

  1. Flex-basis can only be used for flex-item, 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, and when flex-direction is column, flex-basis sets the height.
  3. When flex item is absolute position, flex-basis does not work, while width/height can;
  4. Flex-basis can be used in short forms of flex, such as:flex: 1 0 200px;

Let’s take a look at the function 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 have increased the same width from the original initial width:

image

Of course, if this example is changed to usewidthIt is the same effect, but although the effect is the same but the meaning is different, so when using flex layout, you should still try to abide by the specifications and choose the right person to do the right thing.

4. Order

viaorderProperty we can change the order in which flexitems are arranged, 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 of arrangement is the order in which flex item appears in html:

image

When we modify flex item’sorderAfter the value, flex item is sorted in ascending order of order value:

css:

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

Effect:

image

Conclusion

Flex will be briefly introduced here first. flex is very powerful and simple. I hope you will enjoy it.