Let you understand flex layout and CSS in seconds

Time:2020-2-13

Basic concepts

The elements with flex layout are called flex containers, or “containers”. All its child elements automatically become container members, called flex items, or “projects.”.

Let you understand flex layout and CSS in seconds
The container has two axes by default: the main axis and the cross axis. The starting position of the main axis (the crossing point with the border) is called main start and the ending position is called main end; the starting position of the cross axis is called cross start and the ending position is called cross end.

Items are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied is called cross size.

Properties of the container

flex-direction\
flex-wrap\
flex-flow\
justify-content\
align-items\
align-content

Flex direction attribute

Property to determine the direction of the spindle (i.e. the direction in which items are arranged)

flex-direction: row | row-reverse | column | column-reverse;

  • Default display: Flex attribute direction from left to right
<style>
        *{
        <! -- reset -- >
            margin: 0;
            padding: 0;
        }
        .box *{
            <! -- beautification code -- >
            text-align: center;
            padding: 40px;
            color:white;
            font-size: 20px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
        .box{
            display: flex;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }
        .item1{
            background: #FF6666;
        }
        .item2{
            background: #33CC99;
        }
        .item3{
            background: #0099CC;
        }
        .item4{
            background: #FFCC33;
        }
        .item5{
            background: #336699;
        }
        .item6{
            background: #FF0033;
        }
    </style>
    
     <div class="box">
        <div class="item1">item 1</div>
        <div class="item2">item 2</div>
        <div class="item3">item 3</div>
        <div class="item4">item 4</div>
        <div class="item5">item 5</div>
        <div class="item6">item 6</div>
    </div>

Let you understand flex layout and CSS in seconds

  • flex-direction: row;
.box{
            display: flex;
            flex-direction: row;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • flex-direction: row-reverse;
.box{
            display: flex;
            flex-direction: row-reverse;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • flex-direction: column;
.box{
            display: flex;
            flex-direction: column;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • flex-direction: column-reverse;
.box{
            display: flex;
            flex-direction: column-reverse;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

Flex wrap attribute

By default, projects are arranged on a single line (also known as a grid line). The flex wrap attribute defines how to wrap a line if a line cannot be arranged.

flex-wrap: nowrap | wrap | wrap-reverse;

  • flex-wrap: nowrap;
.box{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • flex-wrap: wrap;
.box{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • flex-wrap: wrap-reverse;
.box{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap-reverse;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

Flex flow property

The flex flow attribute is a short form of the flex direction attribute and the flex wrap attribute. The default value is row nowrap.

flex-flow: <flex-direction> || <flex-wrap>;

 .box{
            display: flex;
            flex-flow: row wrap-reverse;
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

Justify content attribute

The justify content property defines the alignment of the item on the main axis.

justify-content: flex-start | flex-end | center | space-between | space-around;

  • justify-content: flex-start;
.box{
            display: flex;
            flex-direction: row;
             justify-content: flex-start;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • justify-content: flex-end;
.box{
            display: flex;
            flex-direction: row;
             justify-content: flex-end;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • justify-content: center;
.box{
            display: flex;
            flex-direction: row;
             justify-content: center;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • justify-content: space-between;
.box{
            display: flex;
            flex-direction: row;
             justify-content: space-between;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

  • justify-content: space-around;
.box{
            display: flex;
            flex-direction: row;
             justify-content: space-around;
            <! -- light yellow -- >
            background: #FFFFCC;
            height: 100vh;
        }

Let you understand flex layout and CSS in seconds

Align items property

The align items property defines how items are aligned on the cross axis.

align-items: flex-start | flex-end | center | baseline | stretch;

Flex start: align the start point of the cross axis. “
Flex end: align the end of the cross axis. “
Center: align the midpoint of the cross axis. “
Baseline: the baseline alignment of the first line of text for the project. “
Stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.

  • align-items: flex-start
<style>
 *{
            margin: 0;
            padding: 0;
        }
        .box *{
            text-align: center;
            padding: 40px;
            color:white;
            font-size: 20px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
        .box{
            display: flex;
            
            background: #FFFFCC;
            height: 100vh;
             justify-content:space-between;
            align-items: flex-start;
        }
        .item1{
            background: #FF6666;
            height: 20vh;

        }
        .item2{
            background: #33CC99;
            height: 40vh;
        }
        .item3{
            background: #0099CC;
            height: 30vh;
        }
        .item4{
            background: #FFCC33;
            height: 50vh;
        }
        .item5{
            background: #336699;
            height: 30vh;
        }
        .item6{
            background: #FF0033;
            height: 40vh;
        }
    </style>
     <div class="box">
        <div class="item1">item 1</div>
        <div class="item2">item 2</div>
        <div class="item3">item 3</div>
        <div class="item4">item 4</div>
        <div class="item5">item 5</div>
        <div class="item6">item 6</div>
    </div>

Let you understand flex layout and CSS in seconds

  • align-items: flex-end
  .box{
            display: flex;
            background: #FFFFCC;
            height: 100vh;
            justify-content:space-between;
            align-items: flex-end;
        }

Let you understand flex layout and CSS in seconds

  • align-items: center
  .box{
            display: flex;
            background: #FFFFCC;
            height: 100vh;
            justify-content:space-between;
            align-items: center;
        }

Let you understand flex layout and CSS in seconds

  • align-items: stretch
  .box{
            display: flex;
            background: #FFFFCC;
            /* height: 100vh; */ justify-content:space-between;
            align-items: stretch;
        }
        .item1{
            background: #FF6666;
            /* height: 20vh; */
        }
        .item2{
            background: #33CC99;
            height: 40vh;
        }
        .item3{
            background: #0099CC;
            /* height: 30vh; */
        }
        .item4{
            background: #FFCC33;
            /* height: 50vh; */
        }
        .item5{
            background: #336699;
            /* height: 30vh; */
        }
        .item6{
            background: #FF0033;
            /* height: 40vh; */
        }

Let you understand flex layout and CSS in seconds

Align content attribute

The align content attribute defines the alignment of multiple axes. If there is only one < / mark > axis for an item, this attribute does not work.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Flex start: align with the start of the cross axis. “
Flex end: aligns with the end of the cross axis. “
Center: align with the midpoint of the cross axis. “
Space between: it is aligned with both ends of the cross axis, and the interval between the axes is evenly distributed. “
Space around: each axis is equally spaced on both sides. Therefore, the spacing between the axes is twice as large as that between the axes and the border. “
Stretch (default): the axis occupies the entire cross axis.

Project properties

order\
flex-grow\
flex-shrink\
flex-basis\
flex\
align-self

Order attribute

The order property defines the order in which items are arranged. The smaller the value is, the higher the arrangement is. The default value is 0.

order: <integer>;

        .item1{
            background: #FF6666;
            order: 3;
        }
        .item2{
            background: #33CC99;
            order: 2;
        }
        .item3{
            background: #0099CC;
            order: -2;
        }
        .item4{
            background: #FFCC33;
            order: 4;
        }
        .item5{
            background: #336699;
            order: 1;
        }
        .item6{
            background: #FF0033;
            order: 6;
        }

Let you understand flex layout and CSS in seconds

Flex grow attribute

The flex grow attribute defines the magnification of the project, which is 0 by default, that is, if there is any remaining space, it will not be enlarged.

flex-grow: <number>; / default 0 /

 .item1{
            background: #FF6666;
            flex-grow: 1;
        }
        .item2{
            background: #33CC99;
            flex-grow: 2;
        }
        .item3{
            background: #0099CC;
            flex-grow: 1;
        }

Let you understand flex layout and CSS in seconds

Flex shrink properties

The flex shrink attribute defines the reduction ratio of the project, which is 1 by default, that is, if there is not enough space, the project will be reduced.

flex-shrink: <number>; / default 1 /

If the flex shrink attribute of all projects is 1, when there is not enough space, they will be scaled down equally. If the flex shrink property of one project is 0 and the other projects are all 1, the former will not shrink when there is insufficient space. “
A negative value is not valid for the property.

Flex basis properties

The flex basis attribute defines the main size of the project before allocating extra space. According to this property, the browser calculates whether there is extra space for the spindle. Its default value is auto, which is the original size of the project.

flex-basis: <length> | auto; / default auto /

It can be set to the same value as the width or height attribute (such as 350px), so the project will occupy a fixed space.

Flex attribute

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

flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

This property has two shortcut values: Auto (1 1 auto) and none (0 0 auto).

It is recommended to use this property first rather than write three separate properties separately, because the browser will calculate the relevant values.

Align self attribute

The align self property allows a single item to have a different alignment than other items, which can override the align items property. The default value is auto, which means to inherit the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

This attribute may take 6 values. Except for auto, it is completely consistent with the align items attribute.

  • align-self: flex-end;
   .box{
            display: flex;
            flex-direction: column;
            background: #FFFFCC;
            align-content: space-between;
        }
        .item1{
            background: #FF6666;
            width:30vh;
        }
        .item2{
            background: #33CC99;
            width:40vh;
            align-self: flex-end;
        }
        .item3{
            background: #0099CC;
            width:60vh;
        }
        .item4{
            background: #FFCC33;
            width:50vh;
        }
        .item5{
            background: #336699;
            width:20vh;
        }
        .item6{
            background: #FF0033;
            width:60vh;
        }

Let you understand flex layout and CSS in seconds

(end)


An animation tutorial for Amway: https://www.bilibili.com/video\
Reference: http://www.ruanyifeng.com/blog