reference

  flex: 1 0
      calc(
        (100% / min(var(--cx-active-view), var(--cx-max-views))) -
          var(--cx-split-gutter)
      );
Copy the code



Developer.mozilla.org/en-US/docs/…

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size. Remember mainly the meaning and direction of “container”, “item”, “main axis” and “cross axis”.

You can view it as the X-axis and the Y-axis.

Flex-direction determines the direction of the main axis (that is, the alignment of items). It has four possible values: ROW (default) : The main axis is horizontal and the starting point is 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.

flex: 2;

If it contains only one value, it represents flew grow

/* Three values: flex-grow | flex-shrink | flex-basis */

The flex-grow property defines the scale of the project, which defaults to 0.

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.

If the flex-wrap parameter is set by the container, there is no insufficient space. If the space exceeds the flex-wrap parameter, the space is automatically wrapped.

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.

Grammar:

/* Keyword values */
flex: auto;
flex: initial;
flex: none;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;
Copy the code

Some shorthand patterns

A single number

  • 1: In this case it is interpreted as flex: 1 1 0; the flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0.

Two-value syntax:

  • The first value, which must be a number, is resolved to flex-grow
  • The second value: either a number, which is resolved to flex-shrink, or a width, which is resolved to flex-basis.



Flex: auto – equivalent to

The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting “flex: 1 1 auto”.









<html>
<style>
#flex-container {
  background-color: red;
  display: flex;
  width: 50px;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: 1 4 auto;
  background-color: blue;
}

#flex-container > .raw-item {
  flex: 1 0 auto;
  background-color: green;
}
</style>
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box</div>
  <div class="raw-item" id="raw">Raw2 box</div>
</div>
</html>
Copy the code

Updated March 18, 2021

Learning website: css-tricks.com/snippets/cs…

The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

Purpose: To provide a more efficient way to layout, align, and allocate space to elements within a Container, even if the dimensions of those elements are unknown or dynamically changing.

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

The idea behind Flex Layout is to give a container the ability to change the width, height, and order of its elements to best fill the available space of the container and to look good on all types of devices and screen sizes.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Flex layout does not depend on direction, unlike normal layout. For example, Block is vertical and inline is horizontal. Block and Inline layouts are not adequate for complex applications that have orientation changes, size changes, stretch or shrink.

Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

Flex items can be laid out with either the main axis or the Cross Axis.

Main Axis — The main axis of a Flex container is The primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).

Main axis: It doesn’t have to be horizontal. The direction of the spindle depends on the Flex-direction property.

The main – start | main – end – The flex items are placed within The container starting from The main – start and going to The main – end.

Flex items are laid out from main-start to main-end.

More of Jerry’s original articles can be found in “Wang Zixi” :