This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

Why learn this layout?

The Flexbox in CSS3 was born for layout, and using it makes many layouts easier. The typical three-column, vertical, horizontal, and centered layout uses traditional floating and positioning methods, and the code is relatively complex and difficult to understand, which would be very simple if you used Flexbox.

Turn an element into Flexbox

Syntax for defining containers:

display : flex or display : inline-flex

Once the container is defined, the elements in the flex container become flex items, and the container generates two axes: the main axis and the side axis.

Common container properties

The first group:

Flex-direction: used to change the main axis direction. The default value is row

flex-direction: row(from left to right) |row-reverse| (from right to left)column(from top to bottom) |column-reverse(From bottom to top)Copy the code

Flex-wrap: auto-wrap and change the side axis orientation. The default is nowrap

flex-wrap: nowrap| (not a newline)wrap(wrap) |wrap-reverse(Newline and change side axis direction)Copy the code

Flex-flow: Short for the first two

flex-flow: <flex-direction> || <flex-wrap>
Copy the code

The second group:

Context-content: Controls the alignment of child items on the main axis. Default is flex-start

justify-content: flex-startStarting point (aligned) |flex-end| aligned (end)center| (center)space-between| (away)space-around(Equally distributed)Copy the code

Align-items: controls the alignment of sub-items on the side axis. The default value is “stretch”

align-items: flex-startStarting point (aligned) |flex-end| aligned (end)center| (center)stretch(Full side axle without setting height)Copy the code

Align-content: Controls the alignment of rows (columns) on the side axis of the subitems

Attribute is almost identical to justify-contentCopy the code

Commonly used item (subitem) properties

The first group:

Order: used to change the position of child items. Default is 0

order: 0// The larger the value, the farther the positionCopy the code

The second group:

Align-self: Controls the alignment of a single subitem on the side axis

Property is almost identical to align-itemsCopy the code

The third group:

Flex-grow: The extension ratio of the child item. Default is 0, that is, no expansion if there is free space.

flex-grow: 0;
Copy the code

Flex-shrink: The percentage of a subitem that shrinks. The default value is 1, that is, if there is insufficient space, the subitem shrinks.

flex-shrink: 1;
Copy the code

Flex-basis: Defines the length of the child before scaling (similar to using width). The default is auto, which is the original size.

flex-basis: auto;
Copy the code

Flex: short form of the first three, the last two optional properties, default value 0 1 auto

flex: 0 1 auto;
Copy the code

The instance

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>The Flexbox is vertically and horizontally centered</title>
  <style type="text/css">
    #div_0 {
      height: 300px;
      width: 500px;
      background-color: dimgray;
      display: flex;
      /* Elastic box */
      justify-content: center;
      /* displays in the middle of the spindle */
      align-items: center;
      /* The child is located in the middle of the side axis */
    }
    #div_1 {
      height: 100px;
      width: 100px;
      background-color: burlywood;
    }
  </style>
</head>
<body>
  <div id="div_0">
    <div id="div_1">Intermediate element</div>
  </div>
</body>
</html>
Copy the code