Complete introductory tutorial on flex layout

outline

Introduction to CSS
box model
what is flexbox
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
order
flex-grow
flex-shrink
flex-basis
flex
align-self

Flexbox basics + project practical video

Introduction to CSS

Reference documentation

What are Cascading Style Sheets

CSS is the abbreviation of Cascading Style Sheet. Is a markup language for (enhanced) control over web page styles and allows the separation of style information from web content.

style syntax

Selector {
    
    property:value}

How to add a style sheet to your web page

You can add style sheets to your web pages in the following three ways. The style definition closest to the target has higher priority. A high-priority style will inherit the non-overlapping definitions of the low-priority style but override the overlapping definitions.

Inline Styles

Inline definition is to use the object's style attribute within the object's markup to define the style sheet attributes that apply to it.

示例代码：

<p style="color:#f00;">这一行的字体颜色将显示为红色</p>

Embedding a Style Block object

<head></head>You can insert a <style></style>block object in the markup of your HTML document , and then <style></style>insert the following code inside.

示例代码：

body {
  background:#fff;
  color:#000;
}
p {
  font-size:14px;
}

Linking to a Style Sheet

You can first create an external style sheet file *.css, and then use the HTML link object.

示例代码：

<link rel="stylesheet" href="*.css" />

Flex layout

Web page layout (layout) is a key application of CSS.

traditional layout

The traditional solution for layout, based on the box model, relies on the display attribute + position attribute + float attribute.

Flexbox layout

CSS Flexible Box Layout Module, referred to as Flexbox Layout, Flexbox layout is a new layout mode in CSS3, which is used to improve label alignment, direction, sorting and other defects in the traditional mode.

The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

The most important feature is that when the parent view changes its size due to different screens, the parent view can dynamically change the width and height of the subview to fill the available space of the parent view as much as possible.

Many designers and developers find that flexbox layout is easier to use. The positioning of elements can be achieved with less code than traditional layout, making the development process simpler.

The latest flexbox supported browsers

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+ (prefixed with -webkit-)
Android 4.4+
iOS 7.1+ (prefixed with -webkit-)

View browser support features .

flexbox usage

To use flexbox layout, you only need to set the display attribute on the parent tag:

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

If you want your child elements to use flexbox layout, you can write:

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

Note: This is the only attribute that allows the container to use flexbox layout, which allows all subviews to become flex items immediately.

box model

Before we start learning about flexbox related properties, we first introduce the flexbox model.

Analogy between classes and objects

Class: It is an abstract concept, such as div, p, span, inputetc. tags

Object: An object is a specific thing, such as <div></div>, <p />, <span></span>, <input />etc.

box model structure

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>

        .flexbox-model-container {
            background-color: #FECE3F;
            width: 600px;
            height: 250px;
            display: flex;
        }

        .flexbox-model {
            background-color: green;
            width: 200px;
            height: 50px;
            padding: 50px;
            border: 10px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>

<div class="flexbox-model-container">
    <div class="flexbox-model">
        flexbox-model
    </div>
</div>

</body>
</html>

renderings

width and height calculation

The width of the box = the width of the blue border in the rendering

The height of the box = the height of the blue border in the rendering

Standard box model structure diagram

The relationship between flex-container and flex-item


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>
        .flex-item {
            width: 120px;
            height: 120px;
            background-color: white;
            margin: 20px;
        }

        .flex-container {
            background-color: #FECE3F;
            width: 600px;
            height: 220px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
</div>

</body>
</html>

Effect diagram analysis

The yellow picture in the picture below is the flex-containerthree white squares. It is flex-itemthe flex-containerparent flex-itemview, which we usually call 容器, flex-itemand it is flex-containerthe subview, which we usually call. There can be multiple in it 项目, and there is only one direct one . There are multiple in it. Arrangement direction. In the picture below, the arrangement direction of the three items is from left to right. We call the line that is consistent with the arrangement direction , and the other line is called .容器项目项目容器容器项目主轴交叉轴

The flexbox property of the container

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

Item's flexbox properties

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

flex-direction

The CSS flex-direction property specifies how internal elements are laid out in a flex container, defining the direction of the main axis (positive or negative).

Note that the values row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from left to right, and row-reverse represents right to left; if its dir attribute is rtl, row represents the axis oriented from right to left, and row-reverse represents From left to right.

row

The main axis of the flex container is defined to be the same as the text direction. Spindle start and spindle end are in the same direction as the content.

Value

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

renderings

row-reverse

The performance is the same as row, but the starting point and end point of the main axis are replaced.

Value

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction: row-reverse;
}

renderings

column

The main axis and block axis of the flex container are the same. The starting point of the spindle is the same as the end point of the spindle and the front and rear points of the writing mode.

Value

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}

renderings

column-reverse

The performance is the same as column, but the main axis start point and main axis end point are replaced.

Value

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
}

renderings

Default value: row

flex-wrap

This attribute is mainly used to set whether the items in the container will wrap.

nowrap

Value

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
}

renderings

wrap

Value

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

renderings

wrap-reverse

Value

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap: wrap-reverse;
}

renderings

Default value:nowrap

flex-flow

flex-flow is a combination of flex-direction and flex-wrap.

Values

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

Default value:`row nowrap`

justify-content

justify-contentIt is mainly used to arrange the spindle tightly inside flex items.容器

flex-start

Value

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}

renderings

flex-end

Value

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

renderings

center

Value

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
}

renderings

space-between

Value

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}

renderings

space-around

Value

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}

renderings

Default value:flex-start

align-items

When flex itemsonly on the main axis 一排, align-itemsthe property is mainly used to set the arrangement 交叉轴on the flex itemsaxis.

stretch

Value

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

renderings

flex-start

Value

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

renderings

flex-end

Value

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

renderings

center

Value

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

renderings

baseline

Value

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items: baseline;
}

renderings

Default value:stretch

align-content

When onflex items the main axis , properties are mainly used to set the arrangement on the axis.多排(只有一排时此属性不起作用)align-content交叉轴flex items

stretch

Value

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

renderings

flex-start

Value

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

renderings

flex-end

Value

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

renderings

center

Value

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

renderings

space-between

Value

.flex-container {
  -webkit-align-items: space-between; /* Safari */
  align-items: space-between;
}

renderings

space-around

Value

.flex-container {
  -webkit-align-items: space-around; /* Safari */
  align-items: space-around;
}

renderings

Default value:stretch

order

orderUsed to change the 容器default 项目sort order.

Value

.flex-item {
  -webkit-order: <integer>; /* Safari */
  order: <integer>;
}

renderings

By modifying the value of flex-item, flex items can be rearranged according to orderthe value.

Default value:0

flex-grow

flex-growThe default value of the property is 0that when it is 0, although there is flex-containera lot of extra space left, the current one flex-itemwill not automatically expand or shrink to fill flex-containerthe extra space.

In fact, we can summarize it this way, flex-growthe attribute value determines the proportion of the remaining space that it automatically fills relative to other sibling views flex-container.

Values


.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

When all itemhave flex-growthe same value, they occupy the same space.

The proportional relationship among the 5 in the figure below flex-itemis:1:3:1:1:1

Default value: Default value: 0

flex-shrink

flex-shrinkThe attribute is flex-growthe opposite. The default value is 0, even if flex-containerthe space is not enough, reduction is not allowed. When flex-shrinkthe value is a non- 0positive number, it indicates the current reduction ratio flex-itemrelative to other values .兄弟item

Value


.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink: <number>;
}

Assume that except for the value in the figure below , 2which is the default value , all others are , then when there is insufficient space, it will not become smaller, and other sibling views will be reduced in proportion.flex-shrink012

Default value:1

flex-basis

Specify the size of a certain item on the main axis, or the proportional relationship itembetween the main axis and the size.flex-container

Value

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

renderings

Default value:auto

flex

flexIs flex-grow, the abbreviation of flex-shrinkand flex-basis, autoequivalent to 1 1 auto, noneequivalent to 0 0 auto.

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

Default value:0 1 auto

align-self

align-selfIt is mainly used when one's own state has been changed due to flex-containerthe attributes above but you want your own state to be different from the states of other sibling views. You can use your own state to set it.align-itemsalign-self

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Default value:auto