Why use flex layout?

This is the 6th day of my participation in the 2022 First Writing Challenge. Activity details: 2022 First Writing Challenge

Q: Why use flex layout?

A: Because it works well.

During an interview, when the interviewer asks why we use flex layout, we must first understand what exactly the interviewer wants to know. A simple answer of "it works well" definitely won't cut it. Any solution or technology emerges to address previous shortcomings. Therefore, compared to the pain points of traditional layout solutions, flex layout certainly has its advantages and value. So next, we need to explain what the traditional layout looks like, and then what the flex layout looks like.

The traditional solution for layout is based on the box model, relying on properties such as display, position, and float. It is very inconvenient for special layouts.

For example, vertical centering is not easy to achieve. We might need to combine position + transform to make it work.

<div class="wrap">
  <div class="box"></div>
</div>

.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);
}

The new flex layout allows for simple, complete, and responsive implementation of various page layouts.

With flex layout, setting vertical centering for a box model becomes very simple; you only need to set the align-items: center; property.

.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;
}

Flex is short for Flexible Box, meaning "flexible layout," designed to provide maximum flexibility for box models.

1. Two-Column Layout

If we need to achieve a two-column page layout where one column has a fixed width and the other is adaptive.

1.1 Method 1

Left uses float: left, right uses margin-left.

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

Floating elements are taken out of the document flow and lose their own space, causing subsequent elements to be overlapped by the floated element. This is resolved by adding margin or padding to push them out.

1.2 Method 2

Left uses float: left, right uses overflow: hidden.

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

This also clears the float via overflow: hidden;.

1.3 Method 3

Use positioning with position.

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

1.4 Method 4

Use flex layout.

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

2. Properties

Q: The difference between align-items and justify-content

In a flex layout, the element that adopts display: flex is called a flex container. The container has two axes by default: the main axis (horizontal) and the cross axis (vertical).

The flex-direction property determines the direction of the main axis (i.e., the arrangement direction). It can take four values.

1. row (default): The main axis is horizontal, starting from the left.
2. row-reverse: The main axis is horizontal, starting from the right.
3. column: The main axis is vertical, starting from the top.
4. column-reverse: The main axis is vertical, starting from the bottom.

Note: During an interview, do not say that the main axis is always horizontal, as that would be inaccurate; it can be either horizontal or vertical depending on the value of flex-direction.

• align-items defines how items are aligned on the cross axis.
• justify-content defines how items are aligned on the main axis.

Q: What does flex:1; mean?

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. Its default value is 0 1 auto. The last two properties are optional.

• flex-grow defines the ability for a flex item to grow if necessary. The default is 0, meaning the item will not grow even if there is remaining space. If all items have flex-grow: 1, they will equally distribute the remaining space. If one item has flex-grow: 2 and others have 1, that item will take twice as much of the remaining space.
• flex-shrink defines the ability for a flex item to shrink if necessary. The default is 1, meaning the item will shrink when space is insufficient. If all items have flex-shrink: 1, they will shrink proportionally. If one item has flex-shrink: 0 and others have 1, that item will not shrink when space is insufficient.
• flex-basis defines the default size of an element before the remaining space is distributed. The browser uses this property to calculate whether there is extra space on the main axis. The default is auto, meaning the item's natural size.

The flex property has two shortcut values: auto (1 1 auto) and none (0 0 auto).

It is recommended to use this shorthand property rather than writing three separate properties, as the browser can infer related values.

Therefore, flex: 1 means to equally distribute the remaining space.