“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Q: Why use Flex layout?

Answer: because easy to use.

When asked why you want to use Flex layout in an interview, it’s important to understand what the interviewer is looking for. The simple answer is “easy to use” is definitely not. Any solution or technology is created to compensate for the shortcomings of the previous layout, so flex layout certainly has advantages and value over the pain points of traditional layout solutions. So next we have to talk about what the traditional layout looks like, and then what the layout looks like using Flex.

Traditional layout solutions, based on the box model, rely on display, position, float and other properties. It is very inconvenient for those special layouts.

For example, vertical center is not easy to achieve. We might need position + Transform to do this.

<div class="wrap">
  <div class="box"></div>
</div>
Copy the code
.wrap {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}

.box {
  height: 100px;
  width: 100px;
  border: 1px solid blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%.0);
}
Copy the code

The new solution, Flex layout, enables simple, complete and responsive page layouts.

It’s easy to center the box model vertically using flex layout. Just set align-items: Center; Properties.

.wrap {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}

.box {
  height: 100px;
  width: 100px;
  border: 1px solid blue;
}
Copy the code

Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models.

A two-column layout

If we need to achieve a two-column layout of the page, one column fixed width, one column adaptive.

Method 1

Left float:left, right margin-left.

.left { float: left; width: 200px; }
.right { margin-left: 200px; }
Copy the code

Floating elements are separated from the flow of the document on the page and have no place of their own. The following elements are covered by floating elements, which are supported by margin or padding.

Method 2

Float :left, overflow:hidden right

.left { float: left; width: 200px; }
.right { overflow: hidden; }
Copy the code

You can also use overflow: hidden; Clear the float.

Methods 3

Using position

.wrap { position : relative; }
.left { width: 200px; }
.right { position: absolute; top: 0; left: 200px; }
Copy the code

Methods 4

Use flex for an elastic layout

.wrap { display: flex; }
.left { width: 200px; }
.right { flex: 1; }
Copy the code

attribute

Question: ** the difference between align-items and justify-content

Elements with a Flex layout are called Flex containers, or “containers” for short. The container has two axes by default: a horizontal main axis and a vertical cross axis.

The flex-direction property determines the direction of the main axis (that is, the alignment direction). There are four property values that can be set.

  • Row (default) : The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal and the starting point is at the right end.
  • Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
  • Column-reverse: the main axis is vertical and the starting point is at the bottom.

Note: Don’t say “horizontal is the main axis” during the interview. This is not accurate because the main axis could be horizontal and vertical. Because the flex-direction property determines the direction of the spindle.

  • The align-items property defines how items are aligned on the cross axis.
  • The context-content attribute defines the alignment of items on the main axis.

Q: * * flex: 1; What does it stand for?

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.

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space. 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.

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. If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

The Flex-basis property defines the amount of principal space that the project occupies before allocating excess space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

The Flex properties property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

So Flex: 1 means to divide the remaining space equally.