Flex Layout tutorial: Syntax section

Web page layout is the key application of CSS

The traditional layout solution is based on the box model and relies on display+float+position, which is very inconvenient for special layouts such as vertical centering, whereas Flex layouts are as easy as pieIn 2009, the W3C introduced a new solution, Flex layout, that enables simple, complete, and responsive page layouts. It is currently supported by all browsers, which means it is safe to use it nowFlex layouts will be the preferred solution for future layouts. Created by JailBreak for this articleReference Example demonstrationThese three articles are referred to

  • CSS-Tricks A Complete Guide to Flexbox 
  •  A Visual Guide to CSS3 Flexbox
  • Solved by Flexbox 

1. What is the Flex layout?

Flex stands for Flexible Box and is used to provide maximum flexibility to Box models. Any container can be specified as a Flex layout

.box{
  display: flex;
}
Copy the code

Inline elements can also be laid out using Flex

.box{
  display: inline-flex;
}
Copy the code

Webkit-kernel browsers must be prefixed with -webkit

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

⚠️** Note: The float clear and vertical-align attributes of child elements are invalidated when the Flex layout is set to **

2. Basic concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items” for short.

  • The container has two axes by default:
    • Main axis
    • Vertical cross axis
  • The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end
  • The starting position of the intersecting axis is called cross start and the ending position is called cross end
  • By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size
The attribute name Attribute meaning The possible values of the property

Define the attribute of the container | flex – direction | decide the direction of the spindle | row (the default) : level, starting at the left end row – reverse: level, starting on the right side column: vertical, starting point along the column – reverse: in the vertical, Starting next along the | | | flex – wrap | decided to fit inside a axis, how to wrap | nowrap (default) : non-breaking wrap: line, the first line in the above wrap – reverse: a line break, First line | in the | | flex – flow | above two attributes (default is row nowrap “| | | | the justify – content on the main shaft alignment | | defined project flex – start: (default) left alignment -Rufus: Flex-end, center, space-between, space-around, space-around So the gap between the projects is about twice the project and the spacing between the border of | | | the align – items | how define project on the cross shaft alignment | flex – start: the starting point of cross shaft alignment flex – end: the end of the cross shaft alignment center: the halfway point of the cross shaft alignment Baseline: Project the first line of the text of the baseline alignment stretch (default) : if the project is not set or set to auto, will fill the height of the whole container | | | the align – content | defined with axis alignment, an axis of this property doesn’t work | flex – start: And the starting point of the cross shaft alignment flex – end: and the end of the cross shaft alignment center: with the halfway point of the cross shaft alignment space – between: with the ends of the cross shaft alignment, the gap between the axis of the average distribution of space – around: The interval between each axis are equal, so the gap between the axis than the gap between the axis and the border twice | | defined in the project properties on | order | define the order of the project, the smaller the value, arrange the top default 0 | | | | flex – turns | defined amplification ratio of the project, If there is space left, don’t enlarge | the default is 0 (if all flex – turns attribute is 1 of the project, Equal the remaining space) | | | flex – the shrink | defined project; the default 1 negative value of this attribute is invalid | | | | flex – basis | defined before allocate extra space, the space taken on a spindle project, Spindle is calculated according to the attribute browser | default auto spare space, namely the project originally size | | | flex | is above three short | the default value of 0 1 auto after two values optional | | | the align – self | Allows a single project and other projects of alignment, covering the align – the items property inherited the default auto | align – the items property of the parent element, if there is no parent element, is equivalent to stretch |

3. Container properties

3.1 the flex – direction attribute

Flex-direction determines the direction of the main axis (that is, the alignment of items)

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code

  • Row (default) axes are horizontal and start at the left end
  • Row-reverse the main axis is horizontal and the starting point is at the right end
  • Column has a vertical axis and a starting point at the top
  • Column-reverse the main axis is vertical and the starting point is lower

3.2 the flex – wrap attributes

Flex-wrap defines line breaks. By default, items are placed on a single line (also known as “axis”). If one axis does not fit, how do you wrap

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code

  • Nowrap (default) does not wrap lines

  • Wrap, first line at the top

  • Wrap-reverse newline, first line below

3.3 the flex – flow

The flex-flow property is a short form of flex-direction+flex-wrap. The default value is Row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code

3.4 the justify – content attribute

The context-content attribute defines the alignment of items on the main axis

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

It takes five values, aligned according to the direction of the axis. So let’s say that the principal axis is going from left to right

  • Flex-start (default) left aligned
  • The flex – end right alignment
  • Center in the middle
  • Both ends of space-between are aligned and the items are equally spaced
  • Space-around Each project has equal spacing on both sides. As a result, the spacing between items is twice as large as the spacing between items and the border

3.5 the align – the items property

Align-items define how items are aligned on the cross axis

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

It could take five values. The exact alignment depends on the direction of the intersecting axis, which is assumed to run from top to bottom

  • Flex-start aligns the starting point of the cross axis
  • Flex-end aligns the end of the cross axis
  • Center Aligns the midpoints of the intersecting axes
  • Stretch (default) If the height of the project is not set or set to Auto, it will occupy the entire height of the container
  • Baseline alignment of the first line of text of the baseline project

3.6 the align – content attribute

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

The property may take six values

  • Flex-start is aligned with the starting point of the cross axis
  • Flex-end is aligned with the endpoint of the cross axis
  • Center is aligned with the midpoint of the intersecting axis
  • The stretch axis occupies the entire cross axis
  • The space-between is aligned with both ends of the cross axes, and the spacing between axes is evenly distributed
  • Space-around Both sides of each axis are equally spaced. Therefore, the spacing between axes is twice as large as the spacing between axes and borders

4. Project attributes

4.1 the order attribute

The order attribute defines the order in which items are sorted. The lower the value (which can be negative), the higher the order. The default is 0

.item {
  order: <integer>;
}
Copy the code

4.2 the flex – turns attributes

The flex-Grow property defines a project with a default zoom ratio of 0, or no zoom if there is free space

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

If all items have a Flex-grow attribute of 1, they divide the remaining space equally (if any). If one item has a Flex-grow attribute of 2 and the other items are all 1, the remaining space occupied by 2 is twice as large as the other items

4.3 the flex – the shrink properties

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks

.item {
  flex-shrink: <number>; /* default 1 */
}
Copy the code

If the flex-shrink attribute is set to 1 for all items, the value is scaled equally when space is insufficient. If the flex-shrink attribute is set to 0 for one item and the value is set to 1 for all other items, the value of 0 is not scaled when space is insufficient. Negative values have no effect on this property

4.4 the flex – the basis of attributes

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space

4.5 the flex property

The flex attribute is short for flex-grow+ Flex-shrink +flex-basis. The default value is 0. 1 Auto The last two attributes are optional

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

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

  • It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values

4.6 the align – self attribute

The align-items attribute defaults to auto, which inherits the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

This property can have six values, all except autoalign-itemsIdentical attributes

Flex Layout Tutorial: Examples

No matter what the layout, Flex can usually be done with a few lines of command

1. Dice layout

On one side of the die, up to 9 dots can be placedLet’s take a look at how Flex implements a 1-point to 9-point layout. You can go toCodepen view the Demo Unless otherwise specified, the HTML template for this section is as follows

<div class="box">
  <span class="item"></span>
</div>
Copy the code

In the code above, the div element (representing a face of the die) is the Flex container, and the SPAN element (representing a point) is the Flex item. If you have multiple projects, add multiple SPAN elements, and so on

1.1 single project

.box {
  display: flex;
}
Copy the code

.box {
  display: flex;
  justify-content: center;
}
Copy the code

.box {
  display: flex;
  justify-content: flex-end;
}
Copy the code

.box {
  display: flex;
  align-items: center;
}
Copy the code

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
Copy the code

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
Copy the code

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
Copy the code

1.2 double project

.box {
  display: flex;
  justify-content: space-between;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
Copy the code

.box {
  display: flex;
}
.item:nth-child(2) {
  align-self: center;
}
Copy the code

.box {
  display: flex;
  justify-content: space-between;
}
.item:nth-child(2) {
  align-self: flex-end;
}
Copy the code

1.4 the four projects

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}
Copy the code

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>
Copy the code
.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
Copy the code

1.5 six projects

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}
Copy the code

<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>
Copy the code
.box {
  display: flex;
  flex-wrap: wrap;
}
.row{
  flex-basis: 100%;
  display:flex;
}
.row:nth-child(2) {justify-content: center;
}
.row:nth-child(3) {justify-content: space-between;
}
Copy the code

1.6 the nine project

.box {
  display: flex;
  flex-wrap: wrap;
}
Copy the code

1.7 Rolling dice

<style>
  /* Flexbox dice by Landon Schropp http://davidwalsh.name/flexbox-dice I have just integrate it in my 3D cube */

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  body {
    background: # 444;
    perspective: 1200px;
    padding-left: 50%;
  }

  /* PREPARING FACES */
  .preface {
    position: absolute;
    transform: rotateX(45deg);
    transform-style: preserve-3d;
  }

  .preface .face {
    padding: 30px;
    height: 200px;
    width: 200px;
    transform-style: initial;
    border: 1px # 333 solid;
    background: rgba(255.255.255.0.9);
    object-fit: contain;
  }

  .pip {
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: # 333;
    box-shadow: inset 0 3px # 111, inset 0 -3px # 555;
  }


  / * 1 ° FACE * /
  #top .face {
    transform-origin: top;
    transform: translateY(-200px);
    transform: rotateX(90deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  / * 2 ° FACE * /
  #front .face {
    transform: translateZ(200px);
    display: flex;
    justify-content: space-between;
  }

  #front .face .pip:nth-of-type(2) {
    align-self: flex-end;
  }

  / * 3 ° FACE * /
  #bottom .face {
    transform-origin: bottom;
    transform: translateY(200px);
    transform: rotateX(-90deg);
    display: flex;
    justify-content: space-between;
  }

  #bottom .face .pip:nth-of-type(2) {
    align-self: center;
  }

  #bottom .face .pip:nth-of-type(3) {
    align-self: flex-end;
  }

  / * 4 ° FACE * /
  #back .face {
    display: flex;
    justify-content: space-between;
  }

  #back .face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  / * 5 ° FACE * /
  #left .face {
    transform-origin: left;
    transform: translateX(-200px);
    transform: rotateY(-90deg);
    display: flex;
    justify-content: space-between;
  }

  #left .face .column:nth-of-type(2) {
    justify-content: center;
  }

  #left .face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  / * 6 ° FACE * /
  #right .face {
    transform-origin: right;
    transform: translateX(200px);
    transform: rotateY(90deg);
    display: flex;
    justify-content: space-between;
  }

  #right .face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  section {
    padding-top: 40%;
    transform-origin: 0% 0%;
    animation: spinning 5s ease-in-out 0s infinite alternate;
    transform-style: preserve-3d;
  }

  @keyframes spinning {
    from {
      transform: rotateY(0deg)}to {
      transform: rotateY(360deg)}}</style>

<section class="container">
  <div id="top" class="preface">
    <div class="face">
        <span class="pip"></span>
    </div>
  </div>
  <div id="front" class="preface">
    <div class="face">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
  </div>
  <div id="bottom" class="preface">
    <div class="face">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
  </div>
  <div id="back" class="preface">
    <div class="face">
      <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
    </div>
  </div>
  <div id="left" class="preface">
    <div class="face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
  </div>
  <div id="right" class="preface">
    <div class="face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
  </div>
</section>
Copy the code

2. Grid layout

2.1 Basic grid layout

The grid layout distributes space evenly within the container, much like the dice layout above, but requires automatic scaling of items

<div class="Grid">
  <div class="Grid-cell">.</div>
  <div class="Grid-cell">.</div>
  <div class="Grid-cell">.</div>
</div>
Copy the code
.Grid {
  display: flex;
}
.Grid-cell {
  flex: 1;
}
Copy the code

2.2 Percentage Layout

The width of one grid is a fixed percentage, and the remaining space is allocated equally to the remaining grids

<div class="Grid">
  <div class="Grid-cell u-1of4">.</div>
  <div class="Grid-cell">.</div>
  <div class="Grid-cell u-1of3">.</div>
</div>

<style>
.Grid {
  display: flex;
}
.Grid-cell {
  flex: 1;
}
.Grid-cell.u-full {
  flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}
 </style>
Copy the code

2.3. Grail layout

Holy Grail Layout is the most common type of website Layout. From top to bottom, the page is divided into three sections:

  • The head (the header)
  • The torso is divided horizontally into three columns, from left to right:
    • navigation
    • The main bar
    • The sidebar
  • The tail (footer)

<body class="HolyGrail">
  <header>.</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">.</main>
    <nav class="HolyGrail-nav">.</nav>
    <aside class="HolyGrail-ads">.</aside>
  </div>
  <footer>.</footer>
</body>

<style>
  .HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header.footer {
  flex: 1;
}
.HolyGrail-body {
  display: flex;
  flex: 1;
}
.HolyGrail-content {
  flex: 1;
}
.HolyGrail-nav..HolyGrail-ads {
  /* The width of both sidebars is set to 12em */
  flex: 0 0 12em;
}
.HolyGrail-nav {
  /* Navigation to the far left */
  order: -1;
}
<style/>
Copy the code

If the screen is small, the three columns of the torso automatically become vertical overlay

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav..HolyGrail-ads..HolyGrail-content {
    flex: auto; }}Copy the code

2.4. Layout of input boxes

We often need to add a prompt in front of the input field and a button in the back

<div class="InputAddOn">
  <span class="InputAddOn-item">.</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">.</button>
</div>

<style>
  .InputAddOn {
  display: flex;
}
.InputAddOn-field {
  flex: 1;
}
</style>
Copy the code

2.5. Suspension layout

Sometimes, to the left or right of the main column, you need to add a picture bar

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">.</p>
</div>

<style>
  .Media {
  display: flex;
  align-items: flex-start;
}
.Media-figure {
  margin-right: 1em;
}
.Media-body {
  flex: 1;
}
</style>
Copy the code

2.6 Fixed bottom column

Sometimes, with too little content to fill a screen, the bottom column is pushed up to the center of the page. You can use the Flex layout so that the bottom column always appears at the bottom of the page

<body class="Site">
  <header>.</header>
  <main class="Site-content">.</main>
  <footer>.</footer>
</body>
<style>
  .Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}
</style>
Copy the code

2.7. Streaming layout

The number of items per row is fixed, and the line will automatically branch

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}
Copy the code