Traditional layout

  • In a traditional layout, we usually use the following methods to achieve the desired effect:

Float + Clear position relative + Absolute display inline-block negative margin

  • These layouts can be arbitrarily combined to achieve the desired effect, but also increase the difficulty. Vertical center, for example, is not so easy to achieve

A more flexible layout

  • We use Flex layout by setting up a containerdisplay: flexTurn it into a Flex container, and the elements inside become container members.
  • Let’s start with a picture

flex-container
flex item


Container properties

display


.container {
  display: flex; /* or inline-flex */
}

Copy the code

The four Flex items are automatically lined up

flex-direction

Row: the default spindle direction runs from left to right with the starting point on the left. Row-reverse: the spindle direction runs from right to left with the starting point on the right. Column: the spindle direction runs from top to bottom with the starting point on the top

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

flex-wrap

Wrap: displays wrap-reverse when the container width is insufficient for child elements and reverses the order

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

flex-flow

Is short for flex-direction and flex-wrap. The default values are row and nowrap.

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

justify-content

Flex-start: left-aligned by default flex-end: right-aligned Center: centered space-between: aligned at both ends space-around: evenly distributed elements

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

align-items

Side axis alignment Flex-start: Aligns with the starting point of the cross axis. Flex-end: aligns with the end of the cross axis. Center: aligns with the midpoint of the intersecting axis. Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes. Space-around: The spacing on both sides of each axis is equal. Stretch (default) : Axis takes up the entire cross axis. If the child element is not set to height

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

margin: 10px

The attribute of the item

flex-grow

Define the zoom ratio of item, default is 0, then there is free space will not zoom.

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

flex-shrink

Define the shrink ratio of item, default is 1, then space shortage will shrink. If 0, the project does not shrink if all other items are 1.

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

flex-basis

Defines the size of the main axis that item occupies before allocating extra space. The default is auto, which is the size of the item itself.

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

flex

This attribute is short for flex-grow, Flex-shrink, and Flex-basis. You are advised to use this attribute in preference to the preceding attributes to facilitate browser calculation.

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

align-self

This attribute defines itself on the side axis to override the align-item of the parent container.

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

order

Defines the order of items in which the smallest value is first, and the default value is 0 or negative.

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

The last

Our flex layout is perfectly centered in just three lines of code.

.container { display: flex; // Set flex container justify-content: center; Align -items: center; // The side axis is centered}Copy the code