This is the seventh day of my participation in Gwen Challenge

In our last CSS layout article, we explained grid layout in detail. This article will take you to learn flex layout!

Full text mind map, recommended collection!

Introduction to the

Flex layouts, also known as “elastic layouts”, are used to provide maximum flexibility for box models.

Any container can be specified as a Flex layout.

.box{
    display: flex;
}
Copy the code

Inline Flex layout can also be used for inline elements

Note: this point has been interviewed before, you can pay attention to it

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

What should I pay attention to when using?

  • Some browsers have compatibility problems and need to be rectified. (IE: “You can just report my ID card”)
  • The float, clear, and vertical-align attributes of the child elements are invalid when the parent element is set to flex layout, so when using Flex layout, you should consider the structure of the page before using the child element.

The basic concept

Like grid layouts, there are containers and projects. Elements that use Flex layouts are called Flex containers, or “containers” for short. All of its child elements automatically become container members, called Flex projects, or “projects” for short.

Note: Unlike grid layouts, Flex layouts are one-dimensional, either by row or column

That is, if the parent element has a Flex layout, the parent element is a container and all child elements automatically become projects.

There are many more detailed properties in the Flex layout, all of which are shown in the diagram

  1. Horizontal main axis
  2. Vertical cross axis
  3. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end
  4. The starting position of the intersecting axis is called cross start and the ending position is called cross end
  5. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size

Container attribute

Container properties, as the name implies, are the properties set on the container. There are six of them

  • That is, this part of the properties are set on the container box!

1. flex-direction

  • flex-directionAttributes determine the direction of the main axis, that is, the alignment of items

The row has four attribute value | row – reverse | column | column – reverse

The test code

Different colors are set for each of the three items

<div class="container">
    <div class="item item-1">flex item1</div>
    <div class="item item-2">flex item2</div>
    <div class="item item-3">flex item3</div>
</div>
Copy the code

Row (default) : The main axis is horizontal and starts at the left end of the container

Row-reverse: The main axis is horizontal and the starting point is at the right end of the container

Column: the main axis is vertical and the starting point is at the top of the container.

Column-reverse: the main axis is vertical and the starting point is at the bottom of the container.

2. flex-wrap

  • flex-wrapProperty to set what to do when an item cannot be displayed in a row in the container.

There are three attribute values: nowrap | wrap | wrap – reverse

  1. Nowrap (default) : no line breaks

  2. Wrap: first line == above ==

  3. Wrap-reverse: newline, first line == below ==

3. flex-flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap

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

The first property is direction, and the second is whether or not to wrap

4. justify-content

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

There are five attributes values: flex – start | flex – end | center | space – between | space – around

  • flex-start(Default) : Left-justified

  • flex-end: the right alignment,

  • centerCenter:

  • space-between: Align both ends with equal spacing between items

  • space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

5. align-items

The align-items property defines how items are aligned on the cross axis

There are five attributes values: flex – start | flex – end | center | baseline | stretch

  • Flex-start: Alignment of the starting point of the cross axes

  • Flex-end: alignment of ends of crossed axes

  • Center: Alignment of the midpoint of the cross axis

  • Baseline: The baseline alignment of the first line of text of the project

  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

6. align-content

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

Six attribute values: flex – start | flex – end | center | space – between | space – around | stretch

  • flex-start: with cross axesThe starting point is aligned

  • flex-end: with cross axesThe finish is aligned

  • center: aligned with the midpoint of the intersecting axis, i.eVertical center

  • space-between: Alignment with the two ends of the crossing axis, the spacing between the axesThe average distribution

  • space-around: Each axisBoth sides are equally spaced. Therefore, the spacing between axes is twice as large as the spacing between axes and borders

  • stretch(Default) : Axis takes up the entire cross axis

The project properties

Project attributes are written on the project! To set up the project

1. order

The order attribute defines the order of items. The smaller the value is, the higher the order is. The default value is 0.

.item-2 {
    order: 1;
    background-color: plum;
}
Copy the code

Item-2 sets the order to 1, which is larger than the order value of 1, 3, so item-2 comes later

2. flex-grow

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

When one of these projects sets Flex-Grow to 1, it takes up 100% of the remaining space

.item-1 {
    flex-grow: 1;
    background-color: pink;
}
Copy the code

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

3. flex-shrink

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. This is the opposite of flex-grow, which shrinks one by one

If the Flex-shrink attribute is 0 for one project and 1 for all other projects, the flex-shrink attribute is not reduced when space is insufficient.

If the default value is 1, the space is reduced equally when the space is insufficient

Note: Negative values do not apply to this property.

4. flex-basis

The Flex-basis property defines the principal axis space that the project occupies before allocating excess space (as described in the basic concepts). Based on this property, the browser calculates whether the main axis has extra space.

  • Its default value isauto, the original size of the project.

Simply put, when you set flex-basis, you set the size of your project.

Note: The difference between width and flex-basis is that flex-basis has a higher priority. If the value of flex-basis is not auto, then any value set by width is invalid. The value of flex-basis is used. This item will be the value set by width only if the flex-basis value is auto.

Note: Flex-basis and width are auto values, so the final space is determined by the amount of content, and more content takes up more horizontal space

You can see that Item1 occupies 300px before item2 allocates the remaining space

5. Flex properties (emphasis)

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

/* Write order */< 'flex-grow'>  <'flex-shrink'>  <'flex-basis'> 
Copy the code

There are several common values for the Flex property: Auto, None, and 1

The following examples operate on Item1

flex: auto

Flex: auto equals flex: 1 1 auto

flex: none

Flex: None equals flex: 0 0 auto

flex: 1

Note: ** When flex is a non-negative number, the number is flex-grow, flex-shrink is 1, and flex-basis is 0%

So flex: 1 is short for flex: 1 10%

flex: 100px

When flex is a length or a percentage, the value is considered flex-basis, flex-grow is 1, and flex-shrink is 1

Flex: 100px is the same as flex: 1 1 100px

** Because flex-grow: 1, item1 will fill the remaining space

This is the part of the interview where the interviewer says, “Do you know Flex1?”

6. align-self

The align-self property sets the alignment of a single item, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

Align the container bottom and center item1 separately

That’s all you need to know about Flex layout, and I’m sure you’ve learned something from it. Try it out for yourself! Mind maps must be put away!