A front-end development summary of the Flex layout (illustrated, easy to understand, complete)

This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Write in front:

Personal front-end website: Zhangqiang.hk.cn
Welcome to join the blogger front-end learning QQ exchange group: : 706947563, focus on front-end development, learning and progress together!

0 foreword

Flex layouts are one of the more popular layouts for front-end pages these days, making it easy to center vertically and horizontally. In daily development, often can be used, but every time the development of Baidu to take a look at some of its attribute details, today specially for a summary of the system, so that after their own baidu ah ~~ good, the following start ~~~

1 Basic Flex layout concepts

We need to understand two basic concepts, container properties and project properties. Let’s go straight to the code and the diagram, and use the actual field as an example:

 <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
 </div> 
Copy the code

You can see that the outermost div (the one with the ‘flex-container’ class style) is the container, and the next 13 divs within the outermost div are projects. When we write Flex properties on containers and individual projects, they are called container properties and project properties. It is important to note that the container attribute only applies to its first level of div (item). If a div below it is nested with another level of div, it does not apply to that div. That div is a normal text stream.

<div class="flex-container"> <div>1<div> The container attribute has no effect on the inside of the div </div></div>Copy the code

2 Container Properties

All right, here we go. This can be used as a reference manual, and I can guarantee that I have opened the Flex layout knowledge page more than 100 times and looked at this section.

Container properties, which define how items in a container are laid out. Without further ado, let’s take a look at some of its commonly used properties, as follows:

2.1 The flex – direction attribute(Alignment direction)

Values: the row (the default) | row – reverse | column | column – reverse

Used to control the direction and sequence of items.

Row: default value. Horizontal arrangement, items are arranged in positive order 1-2-3;

Row-reverse: the same horizontal arrangement, but the order of the items is in reverse 3-2-1;

Column: in contrast to row, the items are arranged vertically and in the positive order 1-2-3.

Column-reverse: the items are arranged vertically and in reverse order of 3-2-1.

2.2 The flex – wrap attributes(wrap)

Values: nowrap (default) | wrap | wrap – reverse

Used to control whether items are wrapped.

Nowrap (default) : no line breaks.

Wrap: automatically wraps items when they exceed the width of the container.

Wrap-reverse: also indicates a line wrap. Note that the first row will be attached to the bottom of the container, rather than to the top of the container, which is the opposite of wrap.

2.3 The flex – flow properties(Alignment Direction & Line break short)

The Flex-flow property is a short term collection of flex-deriction and Flex-wrap properties, the default property is Row Nowrap, which is stacked laterally without line breaking, if you need to control item packing and line breaking.

2.4 The justify – content attribute(Horizontal alignment)

Used to control the alignment of items on the horizontal axis.

The default flex - startIs left-aligned, center is centered, and the corresponding flex-end is right-aligned.

Space-between means that items on the left and right sides are aligned to the container with equal spacing between items.

Space-around means that the space between projects is twice the space between the left and right sides of the project and the container. It is a special layout that is rarely used in daily use.

The space-instituted spacing between projects equal to the spacing between the project and the container, equalizing the project width and evenly allocating the remaining width as the left and right margin of the project.

2.5 The align – the items property(Vertical alignment)

Values: flex – start | flex – end | center | baseline | stretch (default)

Used to control how items are arranged on the vertical axis, the most commonly used is vertically centered.

Default stretch: if the height of the project is not set, or the height is auto, the whole container will be occupied;

Flex-start: the vertical axis is close to the top of the container;

Flex-end: opposite to flex-start, the vertical axis is close to the bottom of the container;

Center: most commonly used, arranged in the center of the vertical axis, that is, in center alignment;

Baseline: a special arrangement where items are arranged according to the baseline of the first line of text;

Note that by default, precy-content and align-items handle the horizontal and vertical aligns of items, respectively. If we change flex-direction to column, they switch axes. Align-items handles the horizontal axis.

2.6 align-content(Multi-line item alignment)

Used to control alignment for multi-line items, not if items have only one line.

Stretch (default) : Makes the item fill the entire container if the height is not set or auto, similar to align-items. Note that I did not set heights for any of the 13 items shown below.

Flex-start, flex-end, center: behave the same as the align-items property, and align the top, middle and bottom of the vertical axis.

Space-between: items on the upper and lower sides are close to the container.

Space-around: consistent with justify-content, where items are spaced twice as far apart as the container at the top and bottom.

Space-instituted: Spacing between projects equal to the spacing between projects and containers.

3 Project Attributes

Individual attributes, written above each item, apply only to the individual item itself. Container properties are written to the container, project properties are written to the project, just like container properties to UL, project properties to Li.

3.1 the order

Value: The default value is 0, which determines the order of the items. A smaller value indicates the earlier the items are arranged.

3.2 the flex – turns up

Value: The default value is 0, which determines whether to enlarge the project when there is enough space in the container. The default value is 0, which indicates that the project is not enlarged. Note that flex-grow is magnified even if the width is fixed.

By default, if the first three of the four items are 0 and the last one is 1, the last item will fill all the remaining space.

Assuming that the first two of the four items are 0 by default and the last two are 1, the last two will split the remaining space equally.

Assuming that the first two items are 0 by default and the last two items are 1 and 1.5, the remaining space will be 1/2.5 and 1.5/2.5, respectively.

3.3 flex-shrink

Value: The default value is 1. This parameter is used to determine whether to shrink the project when the space is insufficient. The default value is 1. Note that even if you set a fixed width, it will shrink.

However, if flex-shrink is set to 0 for a project, the project does not shrink itself, even if it runs out of space.

The third flex-shrink item in the figure above is 0, so it does not shrink itself.

3.4 the flex – basis

The default value is auto, which is used to set the width of the project. If auto is used, the project will retain the default width or use width as its own width. If flex-basis is used, the weight will be higher than the width attribute, so the width attribute will be overridden.

3.5 the flex

Value: 0 by default 1 Auto, the flex attribute is a short form of flex-grow, flex-shrink, and flex-basis, which is used to define the expansion, shrink, and width of a project.

This property has two shortcut keys: flex: Auto (1, 1 auto) and Flex: None (0, 0 auto).

3.6 the align – self

Used to allow individual items to have different alignments than other items, with values behaving exactly as the parent’s align-items property.

4 source

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title>flex layout </title> <style>. Flex-container {display: flex; flex-direction: row; /* flex-wrap: wrap; /* word-wrap */ max-width: 600px; height: 200px; margin: auto; Background: rgba(156, 240, 108, 0.301); } /* Select all <div> elements whose parent element style is. Flex-container */. Flex-container >div {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; /* margin: 10px; */ font-size: 22px; }. Flex-container >div:nth-of-type(n) {background-color: rgba(119, 232, 240, 0.788); } .flex-container>div:nth-of-type(2n) { background-color: rgb(230, 178, 81); }. Flex-container >div:nth-of-type(3n) {background-color: rgba(118, 105, 233, 0.774); } .flex-container>div:nth-of-type(4n) { background-color: rgb(214, 123, 199); } </style> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> </div> </body> </html>Copy the code

5 Source repository address

HTML at main · front-end-study-gogogo /template-html-css-js (github.com)