Take a closer look at the attributes on the parent element of the Flex layout

In the previous section, I briefly introduced flex and two small examples of flex. I introduced Flex to hyperlink adaptive layout. Following the progress in the previous section, I continued to describe what is called 66 dashi (the configuration of parent and child flex attributes).

Two shaft

These two axes define the general direction of the Flex layout, and the general direction is what guides the children’s alignment, right? Main-axis and cross-axis

main-axis

In fact, simple: flex-direction definition of the direction is the main axis! The default row

cross-axis

The cross axis is perpendicular to the main axis!

If you don’t understand here, please continue to read ~

Container (parent element)

* flex-direction

Specifies how the child elements are arranged in the Flex container. More commonly, it specifies whether the child elements are arranged horizontally or vertically. The default value (row), in this case, defines the main axis (horizontal or vertical, as shown in the figure below).

First of all, there are two directions, horizontal or vertical, and then there is an inverse operation, so there are four values

flex-direction: 'column-reverse' | 'column' |  'row(default)' | 'row-reverse'
Copy the code

flex-wrap

You can wrap a child element if necessary. The default value is no-wrap. If there are too many children, the parent element is not wide enough, and the child element should not wrap

flex-wrap: 	'nowrap'| (default)'wrap' | 'wrap-reverse';
Copy the code

flex-flow

There are no special features, just short for flex-direction + flex-wrap

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

* justify-content

Defines how the main axis direction should be aligned. This property has a lot to do with the value of the Flex-direction property!

justify-content: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 						 'inherit';
Copy the code

  • Flex-start, children are aligned to the left (aligned to the left), there are no gaps between the children;

  • Flex-end, right-aligned child elements (all fit close to the right);

  • Center, the project is centered in the parent element;

  • On both sides of the space between, aligned on both ends of the child elements, the rest of the child elements divide the remaining width (this refers to the width of the parent element after deducting the sum of all child elements width of extra width, will be in the middle of the child elements to divide it, such as the current one child between them, then the remaining width will be split in two, around on both sides of the child elements in the middle, so on. If there are two children in the middle, the remaining space is divided into three equal parts);

  • Space-around, the proportion of the remaining allocated space is shown on the figure! Space-between

  • Space-evenly, the proportion of remaining allocated space is shown on the figure! Space-between

In this case, the value of this attribute should be in bold. For more information, see MDN

* align-items

Define how the subitems are aligned on the cross axis (side axis). I usually use center, flex-end, flex-start. It is best if you go to MDN to see the examples it provides for your own understanding.

align-items: 'flex-start' | 'center' | 'flex-end';
Copy the code

  • Flex-start, child vertical direction (alias: side axis, cross axis) top alignment

  • Center, subitem vertical direction (another name: lateral axis, cross axis) center

  • Flex-end, child vertical direction (alias: side axis, cross axis) bottom alignment

align-content

When defining multiple axes, the value of the attribute is similar to that of justify-content. I usually use center, end, and start. It is best if you go to MDN to see the examples it provides, so that you can understand them.

Note: with a single axis, whatever value you set is invalid!!

align-content: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
Copy the code

The summary of this chapter

Through introducing the above several properties, it is easy to see that the container (parent) of attributes is big in the definition of the direction of policy, to the project (child) do not do the details of the processing, just like we write a composition, the framework design first, and then to the implementation details like ~ ~ ~ the following chapter is introduced into the item attributes!

Flex Family directory

The initial flex