This is the fourth 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 code2 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)
Values: flex – start (the default) | flex – end | center | space – between | space – around | space – evenly;
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)
Values: flex – start | flex – end | center | space – between | space – around | space – evenly | stretch (default);
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.
(Ok, I will write here first, and come back next time to add examples, it’s too late tonight, go to bed first…)
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 code5 Source repository address
HTML at main · front-end-study-gogogo /template-html-css-js (github.com)