preface

When I first started working with flex layouts, I saw justify-content:center and align-items:center.

It’s totally unreadable. So learn Flex. I think most people, other than me, learned about Flex only when they were surprised by its vertical and horizontal center approach, so they really prefer element alignment in everyday development. What I want to do here is make a series to talk a little bit more about Flex layout.

What is a Flex layout?

Flex, short for Flexible Box, means “Flexible layout” and is used to provide maximum flexibility for box-shaped 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 that when set to a Flex layout, float, clear, and vertical-align properties of child elements are invalidated.

concept

When our element is specified as a Flex layout, we call it a container, and all of its children automatically become members of the container, called projects.

From the figure, we can see two lines.

Items are arranged along the main axis by default. The main axis space occupied by a single project is called main size, and the cross axis space occupied by a single project is called cross size.

Container properties

Let’s start with the container property values. There are six properties that a container can set

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

flex-direction

The flex-direction attribute determines the direction of the spindle (that is, the alignment of the items).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
/* -row (default) : the main axis is horizontal and the starting point is left. - row-reverse: Indicates that the main axis is horizontal and the starting point is on the right. -column: the main axis is vertical and the starting point is on the upper edge. - column-reverse: indicates that the main axis is vertical and the starting point is lower. As shown in the following figure, items are arranged in positive 1-2-3 order; Row-reverse indicates that items are arranged horizontally, but the order of items is 3-2-1 in reverse order. Column is in the reverse order of row, and items are in the positive 1-2-3 order. Column-reverse is in the reverse order of column, and items are in the reverse order of 3-2-1 order. * /
Copy the code

flex-wrap

By default, items are lined up along a single line, also known as an “axis”. The flex-wrap property defines how to wrap lines if an axis does not fit.

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

Copy the code
  1. nowrap(Default) : no line feeds.

  1. wrap: line break with the first line at the top.

  1. wrap-reverse: line break with the first line at the bottom. One caveatThe first row will be attached to the bottom of the container, not to the top of the container as we imagined for Item 6“Has the opposite effect to wrap.

flex-flow

The flex-flow property is shorthand for the Flex-direction and flex-wrap properties, and defaults to Row nowrap.

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

This is one of the most common properties we have. The inter-content property defines the alignment of items on the main axis.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
/* It can take up to five values, depending on the direction of the axis. Now let's assume that the main axis is left to right. Flex-start (default) : Align the items left Flex-end: Align the items right Center: center space-between: Align the items at both ends with the same spacing between them. Space-around: Equally spaced on both sides of each project. As a result, the space between items is twice as large as the space between items and borders. The following figure shows */
Copy the code

Space – aroundThe space between items is twice the space between items and containers on the left and right sides, relatively special layout, daily use is not too much.

Space-evenly divided is the space between items equal to the space between items and containers, which is equal to evenly divided the item width and allocates the remaining width equally as the item left and right margins.

The align – the items property

The align-items property, along with the justify-content property, defines how items are aligned on cross axes.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
/* It can take five values. Again, the exact alignment depends on the direction of the cross axis, so let's assume that the cross axis goes from top to bottom. Flex-start: Start alignment of cross axes. Flex-end: End alignment of the cross axis. Center: Aligns the midpoint of the cross axis. Baseline: Baseline alignment of the first line of text in the project. Stretch (default) : If the project has no height set or is set to AUTO, it will take up the entire container height. * /
Copy the code

align-content

The align-content attribute defines the alignment of multiple axes. This property does not work if the project has only one axis.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
/* 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 cross axis. Space-between: aligns with both ends of the cross axis, and the spacing between the axes is evenly distributed. Space-around: the spacing on both sides of each axis is the same. Therefore, the spacing between the axes is twice as large as the spacing between the axes and the border. Stretch (default) : the axis takes up the entire cross axis. * /
Copy the code

Let’s stop here for today, and continue to update…