Application of flex layout

Time:2020-10-18

What is flex layout?

Flex is the abbreviation of flexible box, which means “flexible layout”. Any container can be specified as flex layout

The basic concept of flex?

  • Flex layout elements are called flex containers, or “containers” for short. All its child elements automatically become container elements, or “projects” for short.
  • The container has two axes by default: the horizontal main axis and the vertical cross axis. The arrangement of spindle: from left to right; the arrangement of cross axis: from top to bottom;

    Application of flex layout

Properties of the container

1. Flex direction: the attribute determines the direction of the spindle (i.e. how the items are arranged)

Flex direction: row

Application of flex layout

Application of flex layout

Flex direction: row reverse

Application of flex layout

Application of flex layout

Flex direction: column

Application of flex layout

Application of flex layout

Flex direction: column reverse

Application of flex layout

Application of flex layout

2. Flex Wrap: by default, items are arranged on one line (also known as “axis”)

Flex Wrap: nowarp (no newline, default)

Application of flex layout

Application of flex layout

Flex Wrap: Wrap

Application of flex layout

Application of flex layout

Flex Wrap: wrap reverse

Application of flex layout

Application of flex layout

3. Flex flow: the abbreviation of flex direction and flex wrap attributes. The default values are row and nowrap

4. Justify content: the attribute defines the alignment of items on the spindle

Justify content: Flex start (left aligned, default)

Application of flex layout

Application of flex layout

Justify content: Flex end

Application of flex layout

Application of flex layout

Justify content: Center

Application of flex layout

Application of flex layout

Justify content: space between

Application of flex layout

Application of flex layout

Justify content: space around

Application of flex layout

Application of flex layout

5. Align items: defines how items are aligned (single line) on the intersection axis

Align items: Flex start

Application of flex layout

Application of flex layout

Align items: Flex end

Application of flex layout

Application of flex layout

Align items: Center

Application of flex layout

Application of flex layout

Align items: Baseline

Application of flex layout

Application of flex layout

Align items: stretch (the default value, if the item is not set to height or set to auto, it will occupy the height of the entire container)

Application of flex layout

Application of flex layout

6. Align content: multi line axis alignment

Flex project properties

1. Order defines the order in which items are arranged

Order: number (the smaller the value is, the higher it is. The default value is 0)

Application of flex layout

Application of flex layout

2. Flex grow defines the project magnification

Flex grow: number (the default value is 0. If there is any space left, it will not be enlarged. The value is 1 to enlarge, and 2 is the double size of 1. This kind of push)

Application of flex layout

Application of flex layout

3. Flex shrink defines the project reduction ratio

Flex shrink: number (the default value is 1. If the space is insufficient, it will be reduced. If the value is 0, it cannot be reduced)

Application of flex layout

Application of flex layout

4. Flex basis defines the size of the project itself

Flex basis: number / Auto (default auto, can set a fixed value of 50px / 50%)

Application of flex layout

Application of flex layout

5. Flex: the attribute is the abbreviation of flex grow, flex shrink and flex basis. The default values are 0, 1 and auto

6. Align self the item aligns itself

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

Application of flex layout

Application of flex layout

last

If this article is helpful to you, give it a compliment Mei A kind of Mei A kind of Mei A kind of

Welcome to join us, learn the front end together and make progress together!
Application of flex layout
Application of flex layout

Recommended Today

Basic process principle of Python Django 02 authentication system

*Django authentication system* 1、 Django default user authentication system Django authentication provides a user authentication system with two functions of authentication and authorization: the storage table auth uses_ userFor reference, click here Django user authentication system deals with user accounts, groups, permissions and cookie based user sessions. Django authentication system handles both authentication and authorization […]