This is the 15th day of my participation in the August More Text Challenge

Before Flex layout, we wanted to create an elegant two – or three-column layout for a page that required a lot of trouble using floats or positioning. Now we can do it quickly and easily using flex flex boxes

  • Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models. Block level elements use display: flex; Inline elements use inline-Flex, and the float, clear, and verticle-align attributes of child elements are invalidated when the container uses flex layout

  • Display: flex; Or inline-Flex, the box is called flex Container, or “container.”

  • All children of the current element automatically become container members and become Flex items, or “items” for short.

  • The container defaults to two axes: the horizontal axis and the vertical cross axis. The starting position of the axis (where it crosses 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.

  • Flex-grow: Zoom in

  • Flex-shrink: to shrink a percentage

  • Flex-basis: scaling reference value

  • Flex: Short for flex-grow, flex-shrink, and flex-basis

  • Order: order

  • Align-self: Alignment of a single item

1. flex-grow

Defines the scaling of flex-item on the main axis. The default is 0: no scaling even if there is free space (width).

  • Allocate the remaining space of the box according to the ratio set
  • Expansion: left and right two column layout default value O;
  • If all flex-Items have a flex-grow property of 1, they divide the remaining space equally (if any)

2. flex-shrink

Defines the scaling of flex-Item on the main axis. The default value is 1, which means that the flex-item shrinks if space is insufficient.

  • When the element is shrunk in proportion to the extra part of the box, cut the corresponding size according to the size of the proportion, that is, the larger the proportion, the larger the cut, the default value is 1;
  • If all flex-items have the Flex-shrink attribute value of 1, they are scaled equally when space is insufficient
  • A Flex-item whose flex-shrink is 0 does not shrink when space is insufficient.

3. flex-basis

Flex reference value. The item occupies space on the main axis. The default value is auto, indicating the original size of flex-item.

  • The browser calculates whether there is excess space based on this property
  • If width and height are fixed in absolute units of length (such as 350px), the Flex-item occupies fixed space

4. flex

The value is short for flex-grow, flex-shrink, and flex-basis. The default value is 0. 1 Auto

  • Two quick values: None for (0 0 auto); Auto: (1 1 auto)
  • It is recommended to use attribute values in preference to writing three separate attributes first (the browser will automatically infer related values)

5. order

Property defines the order in which items are sorted. The smaller the value is, the more advanced it is. The default value is 0.

6. align-self

Allows a single Flex-item to be aligned differently from other Flex-items on the cross axis, overwriting the align-items value

  • align-items: auto| flex-start | flex-end | center | baseline | strecth
  • The default value is auto: inherits the align-items property of the parent element
  • Baseline is aligned according to the baseline
  • Equivalent to stretch if there is no parent element
  • Flex-direction Determines the direction of the spindle
  • Flex-wrap whether to wrap a line
  • Flex-flow short for flex-direction and flex-wrap
  • Justify -content Alignment of the project on the main axis
  • Align-items alignment on the side axis
  • Align-content Specifies the alignment of multiple axes

1. flex-direction

Determine the direction of the main axis, the alignment of items

  • The flex – direction: row | row – reverse | column | column – reverse
  • Row (default) The main axis is horizontal and the starting point is at the left end
  • Row-reverse the main axis is horizontal and the starting point is at the right end
  • The column axis is in the vertical direction, and the starting point is at the top
  • Column-reverse the main axis is in the vertical direction and the starting point is at the bottom

2. flex-wrap

By default, items are arranged on a single line (also known as “axis “). The flex-wrap property defines how to wrap a line if an axis does not fit

  • The flex – wrap: nowrap | wrap | wrap – reverse
  • Nowrap (default): no line wrapping *wrap: the first line is at the top
  • Wrap-reverse: newline with the first line at the bottom

3. flex-flow

Is short for flex-direction and flex-wrap. The default value is row nowrap

flex-flow: &&

4. justify-content

Property defines the alignment of items on the main axis.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Copy the code
  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: both ends are aligned with equal intervals 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

Property defines how items are aligned on the cross axis.


.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Copy the code
  • 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

Defines the alignment of multiple axes. This property does not work if the project has only one main thread

  • align-content: flex-start | flex-end | center | space-between | space-around | stretch
  • Stretch (default) : The axis is covered with the entire cross axis
  • Space-between: aligns with both ends of the intersecting axes, and the spacing between axes is evenly distributed
  • Space-around: The spacing on both sides of each axis is equal
  • Flex-start: Align with the cross axis starting point

Flex horizontally and vertically centered:

.container{
            margin: 30px;
            height: 100%;
            width:100%;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
           
            background: red;
        }

Copy the code

Flex layout tutorial: Syntax article