The foreword 0.

This is currently the most commonly used layout scheme, there is no one. When I think back, I realize how unfamiliar I was with the Flex layout. So writing a blog is both a study note and a knowledge share.

1. What is

Also known as Flexbox, it is a one-dimensional layout model. Because it can only process the layout of elements in one dimension at a time: one row or one column [2].

We can declare a label to use flex layout with the following statement. As shown in the code below. The declared label becomes a Flex container.

<div class="flexbox">
</div>

<style>
.flexbox{
    /* Declare a label as flexbox*/
    display: flex;
}

/* You can also declare */ using the inline-flex statement
.flexbox{
    display: inline-flex;
}
</style>
Copy the code

The following example code looks like this:

HTML code:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="flexbox">
    <div id="one"></div>
    <div id="two"></div>
  </div>
</body>
</html>
Copy the code

CSS code (stylus) :

.flexbox
  display flex

#one
  border 10vw solid red

#two
  border 10vw solid blue
Copy the code

2. Redirect the Flex flow

You can change it with flex-direction. You can take four values:

  • row(Default value)
  • row-reverse
  • column
  • column-reverse

Changing flex-direction to row-reverse in the first part of the sample code looks like this:

Changing the flex-direction of the first part of the sample code to column looks like this:

Changing the flex-direction to column-reverse in the first part of the sample code looks like this:

Flexbox uses a two-axis alignment scheme: main axis and cross axis.

When flex-direction is row or row-reverse: main axis is X-axis, cross axis is Y-axis. When the flex-direction attribute is column or column-reverse: reverse.

How to determine direction: When the main axis is X-axis and flex-direction is row, the starting point is left and the ending point is right. The other values are the same.

3. The flex container

The area that uses Flexbox is the Flex container. All Flex containers have the following behavior:

  • The elements are arranged in a row or column. (byflex-directionDecision)
  • The element starts at the beginning of the main axis
  • Elements do not stretch in the main dimension, but they can shrink
  • The element is stretched to fill the cross axis size
  • flex-basisThe default value isauto
  • flex-wrapThe default value isnowrap

If too many elements are out of the container, they overflow without newlines.

4. Visually change the order

Example code is as follows:

<div id="container">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
    <div id="d">D</div>
</div>
Copy the code

The corresponding CSS code is as follows:

#container{
    display: flex;
}

#a { order: 2; }
#b.#d { order: 3; }
#c { order: 1; }
Copy the code

The final display style is as follows:

However, this only changes the order visually, not in fact.

5. Use flex-wrap to implement line breaks

This can be implemented using flex-wrap: wrap.

Sample code is shown below:

6. Short flex-flow property

You can combine flex-direction with flex-flow to create the shorthand flex-flow attribute. The first value specified is flex-dirction and the second value specified is flex-flow.

Format (using stylus preprocessor):

.box
    display flex
    flex-flow row-reverse wrap
Copy the code

7. Flex element attributes

This section covers the following three properties:

  • flex-grow
  • flex-shrink
  • flex-basis

The three properties can be written together as Flex. The order of writing is flex-grow, flex-shrink, and flex-basis.

Format is as follows (Stylus preprocessor) :

$grow = 1
$shrink = 1
$basis = 1

.box
    display flex
    flex $grow $shrink $basis
Copy the code

7.1 the flex – turns up

The Flex element is based on flex-basis, increasing in size along the axis so that the element extends and occupies the space available on the axis. If there are other elements that are also allowed to stretch, they will each occupy a portion of the available space.

The Flex-grow property allocates space proportionally. Example code:

<div id="box">
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
</div>
Copy the code
#box
    display flex

#one
    flex-grow 2
Copy the code

If the first element flex-grow has a value of 2 and the other elements have a value of 1, then the first element will occupy two quarters (in our example, 100px out of 200px) and the other two elements will occupy one quarter (50px each).

7.2 the flex – the shrink

Flex-grow does the exact opposite and handles flex element shrinkage. If you do not have enough space to arrange elements in the Flex container, you can shrink the elements below Flex-basis by setting the Flex-shrink attribute to a positive integer.

7.3 the flex – basis

Used to define flex element space size. If flex-basis is not specified, the Flex-basis value of a Flex element automatically takes the element content size.

8. Alignment and space allocation between elements

This part of MDN is more detailed, so the following content is excerpted. This section deals with attributes:

  • justify-content
  • align-items

8.1 the justify – content

This property is used to align elements in the main axis. The possible values are as follows:

  • strech
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between

8.2 the align – items

This property is used to align elements on the cross axis. The possible values are as follows:

  • stretch
  • flex-start
  • flex-end
  • center

References

  1. The Book of CSS3 (Douban.com)
  2. The basic concept of flex layout – CSS (cascading style sheets (CSS) | MDN (mozilla.org)
  3. Flex and CSS (cascading style sheets (CSS) | MDN (mozilla.org)