This is the 12th day of my participation in Gwen Challenge

A concept,

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

Any container can be specified as a Flex layout.

It is a one-dimensional layout model (as opposed to a grid layout, which is two-dimensional)

Note that with Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.

There are two axes in the Flex container by default: the main axis and the cross axis.

Main axis is horizontal, and cross axis is vertical, as shown in the figure below

  • Main axis: the horizontal axis

  • Cross axis: the axis that is crossed

  • Main size: the space occupied by the main axis

  • Cross axis space cross size: the cross axis space occupied

Ii. Container properties:

Flex-direction determines the direction of the main axis, that is, the alignment of items

  • 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

Let’s use this property by example.

  <div class="box">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
   </div>
Copy the code
 .box {
        display: flex;
        flex-direction: row-reverse;
        height: 1000px;
        background-color: thistle;
    }
    .item {
        width: 150px;
        height: 150px;
        background-color: crimson;
        margin: 10px;
    }
Copy the code

2, flex-wrap: that is, when the project is arranged on the axis, if the axis is not arranged, how to wrap the line.

  • Nowrap (default) : no line breaks.

When not wrapped, the elements are crowded on the same line.

  • Wrap: The first line is at the top

  • Wrap-reverse: newline with the first line at the bottom

1, context-content: defines the alignment of items on the main axis

  • 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.

Align-items: defines how items are aligned on the cross axis i.e. vertically aligned

  • 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 project has no height set, or if it is set to Auto, it will take up the entire height of the container

This property is similar to the above and will not be described in detail.

3. Project attributes

What are the attributes of the project that are in the box inside the example

Flex-grow: Defines the scale of the project.

When flex-Grow is 1, the project takes up the remaining space,

When flex-grow is 2, the remaining space is still occupied by all other items, because it has the maximum value.

If other items have a value of 1, a value of 2 takes up twice as much space as a value of 1. Other default values remain unchanged.

Flex -shrink: defines the size of the project. Default is 1

Similar to the one above, I won’t repeat it.

Flex-basis: Defines the principal axis space that the project occupies before allocating extra space. The default value is auto.

For example, if we set it to 300px

4, flex

Flex is simply a shorthand for the first three properties, with a default value of0 1 autoThe last two attributes are optional.

Align -self allows a single item to be aligned differently from other items.

For example, if we are making a layout within a row and we want the left two to align with the top and the right two to align with the bottom, we can set the align-self of the last two boxes

 .item3..item4 {
        align-self: flex-end;
   }
Copy the code