written in front
Hello everyone, I am [ Lin-Xiaobai ], a student majoring in software engineering , who likes computer knowledge . I hope everyone can learn and progress together ! I am a college student , and my professional level is limited. If you find any mistakes or deficiencies , please correct me! thank you all! ! !
If brothers and sisters are interested in my articles, please don't be stingy with your little hands, give more likes and follow ! ❤❤❤ Love you guys! ! !
Table of contents
1.1 Brief introduction of telescoping box model
1.9 flex implements horizontal and vertical centering
1.11 flex composite properties
【Past review】
【CSS3 Series】Chapter 7 Transition and Animation
【CSS3 Series】Chapter Six · 2D and 3D Transformation
[CSS3 Series] Chapter 5 Web Fonts
【CSS3 Series】Chapter 4 New Gradients in CSS3
【CSS3 Series】Chapter 3 New border and text properties in CSS3
[CSS3 Series] Chapter 2 CSS3 Adds Box Model and Background Attributes
[CSS3 Series] Chapter 1 Three new basic properties of CSS3
【other series】
1. Telescopic box model
1.1 Brief introduction of telescopic box model
- In 2009 , W3C proposed a new box model - Flexible Box (flexible box model, also known as: elastic box ).
- It can easily control: element distribution, element alignment, element visual order ...
- As of now, except for some IE browsers that do not support it, other browsers have all supported it.
- The emergence of the telescopic box model has gradually evolved a new layout scheme - flex layout.
Tips:
- Traditional layout refers to: based on the traditional box model, mainly relying on: display attribute + position attribute + float attribute.
- Flex layout is currently widely used on mobile terminals, because traditional layouts cannot be well presented on mobile devices.
1.2 Flex container, flex item
Flex container : The element with flex enabled is: flex container.
- Set the element:
- display:flex or display:inline - flex , the element becomes a flex container .
- display:inline - flex is seldom used, because it can give multiple parent containers of flex containers, also set as flex containers.
- An element can be both: flex container, flex item.
flex-item : all child elements of the flex container automatically become: flex-item.
- Only the child elements of the flex container become flex items, and descendants of grandchildren, great-grandchild elements, etc., are not flex items .
- Regardless of the original element (block, inline-block, inline), once it becomes a flex item, it will all " block " .
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_伸缩容器_伸缩项目</title> <style> .outer { width: 1000px; height: 600px; background-color: #888; /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner3 { display: flex; /* font-size: 20px; */ /* line-height: 2em; */ } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner inner3"> <div>a</div> <div>b</div> <div>c</div> </div> </div> </body> </html>
1.3 Main shaft and side shaft
- Main axis: Flex items are arranged along the main axis, the main axis is horizontal by default, and the default direction is: from left to right (the left is the start point, and the right is the end point).
- Side axis: The side axis is perpendicular to the main axis, and the side axis is vertical by default, and the default direction is: from top to bottom (the upper side is the starting point, and the lower side is the end point).
1.4 Spindle direction
- Property name: flex - direction
- Common values are as follows:
- row : main axis direction horizontally from left to right - default
- row - reverse : The main axis direction is horizontal from right to left.
- column : The axis direction is vertical from top to bottom.
- column - reverse : The main axis direction is vertical from bottom to top.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_主轴方向</title> <style> .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ /* flex-direction: row; */ /* 调整主轴方向，水平从右到左 */ flex-direction: row-reverse; /* 调整主轴方向，垂直从上到下 */ /* flex-direction: column; */ /* 调整主轴方向，垂直从下到上 */ /* flex-direction: column-reverse; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html>
1.5 Spindle line change mode
- Attribute name: flex - wrap
- Common values are as follows:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_主轴换行方式</title> <style> .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，不换行，默认值 */ /* flex-wrap: nowrap; */ /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴换行方式，反向换行 */ /* flex-wrap: wrap-reverse; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>
1.6 flex-flow
- flex - flow is a composite attribute, which combines the two attributes of flex - direction and flex - wrap . Values have no order requirement .
flex-flow: row wrap;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_flex-flow</title> <style> .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ /* flex-direction: row; */ /* 主轴换行方式，换行 */ /* flex-wrap: wrap; */ flex-flow: row wrap; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>
1.7 Spindle Alignment
- Attribute name: justify - content
- Common values are as follows:
- flex - start : The starting point of the main axis is aligned. --default _
- flex - end : The end of the main axis is aligned.
- center : center alignment
- space - between : evenly distributed, aligned at both ends (most commonly used).
- space - around : Evenly distributed, the distance between the two ends is half of the middle distance.
- space - evenly : Evenly distributed, the distance between both ends is the same as the middle distance.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05_主轴对齐方式</title> <style> .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ /* justify-content: flex-start; */ /* 主轴的对齐方式，主轴的结束位置 */ /* justify-content: flex-end; */ /* 主轴的对齐方式，中间对齐 */ /* justify-content: center; */ /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */ /* justify-content: space-around; */ /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */ justify-content: space-between; /* 主轴的对齐方式，项目均匀的分布在一行中 */ /* justify-content: space-evenly; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html>
1.8 Side axis alignment
case of one row
- Required properties: align - items
- Common values are as follows:
- flex - start : The starting point of the cross axis is aligned.
- flex - end : Align the end of the cross axis.
- center : Aligns to the midpoint of the cross axis.
- baseline : The baseline alignment of the flex item's first line of text.
- stretch : If the height of the flexible item is not set, it will occupy the height of the entire container. -- (default value)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06_侧轴对齐方式_一行</title> <style> .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式，侧轴的起始位置对齐 */ align-items: flex-start; /* 侧轴的对齐方式，侧轴的结束位置对齐 */ /* align-items: flex-end; */ /* 侧轴的对齐方式，侧轴的中间位置对齐 */ /* align-items: center; */ /* 侧轴的对齐方式，侧轴的中间位置对齐 */ /* align-items: baseline; */ /* 侧轴的对齐方式，拉伸到整个父容器（前提：伸缩项目不能给高度），默认 */ /* align-items: stretch; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { height: 300px; font-size: 80px; } .inner3 { height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1x</div> <div class="inner inner2">2x</div> <div class="inner inner3">3x</div> </div> </body> </html>multiline case
- Required attributes: align - content
- Common values are as follows:
- flex - start : Align to the start of the cross axis.
- flex - end : Aligns to the end of the cross axis.
- center : Aligns to the midpoint of the cross axis.
- space - between : Align with both ends of the cross axis, evenly distributed in the middle.
- space - around : The distance between flexible items is equal, twice as large as the distance from the edge.
- space - evenly : Fully evenly split on the lateral axis.
- stretch : fills the entire side axis. --default _
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>07_侧轴对齐方式_多行</title> <style> .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行）侧轴的起始位置对齐 */ align-content: flex-start; /* 侧轴的对齐方式（多行）侧轴的结束位置对齐 */ /* align-content: flex-end; */ /* 侧轴的对齐方式（多行）侧轴的中间位置对齐 */ /* align-content: center; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘距离的2倍 */ /* align-content:space-around; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且边缘没有距离 */ /* align-content:space-between; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的 */ /* align-content:space-evenly; */ /* 侧轴的对齐方式（多行），拉伸，默认 */ /* align-content: stretch; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { height: 300px; } .inner3 { height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>
1.9 flex achieves horizontal and vertical centering
- Method 1: The parent container opens the flex layout, and then uses justify - content and align - items to achieve horizontal and vertical centering
.outer { width: 400px; height: 400px; background-color: #888; display: flex; justify-content: center; align-items: center; } .inner { width: 100px; height: 100px; background-color: orange; }
- Method 2: The parent container opens the flex layout, and then the child element margin: auto
.outer { width: 400px; height: 400px; background-color: #888; display: flex; } .inner { width: 100px; height: 100px; background-color: orange; margin: auto; }
1.10 Scalability
1. flex-basis
- Concept: flex - basis sets the base length in the main axis direction , which will invalidate the width or height.
- Remarks: Spindle horizontal: Width invalid; Spindle longitudinal: Height invalid
- Function: The browser calculates whether there is extra space on the main axis according to the value set by this attribute. The default value is auto , that is: the width or height of the flexible item .
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>09_项目在主轴的基准长度</title> <style> .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { /* 设置伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是纵向的高失效 */ flex-basis: 300px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner">3</div> </div> </body> </html>2. flex-grow（伸）
- Concept: flex - grow defines the magnification ratio of the flex item, the default is 0 , that is: even if there is remaining space in the main axis, it will not be stretched (zoomed in).
- rule:
- If all flex items have a flex - grow value of 1 : they will equally divide the remaining space (if there is room).
- If the flex - grow values of the three flexible items are: 1 , 2 , 3 respectively , then: respectively carve up the space of: 1/6 , 2/6 , 3/6 .
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>10_伸缩项目_伸</title> <style> .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; flex-grow: 0; } .inner1 { flex-grow: 1; } .inner2 { flex-grow: 2; width: 300px; } .inner3 { flex-grow: 3; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>3. flex-shrink (shrink)
- Concept: flex - shrink defines the compression ratio of the item, the default is 1 , that is: if there is insufficient space, the item will shrink.
- The calculation of contraction items is a little more complicated. Let's take a scenario as an example:
- For example:
- Three shrinking items, widths are: 200px, 300px, 200px, and their flex-shrink values are: 1, 2, 3. If you want to accommodate the next three items, you need a total width of 700px, but the current container is only 400px , there is still a difference of 300px, so everyone has to shrink before they can put it down. The specific shrinkage value is calculated like this:
1. Calculate the denominator: (200×1) + (300×2) + (200×3) = 1400
2. Calculate the ratio:
- Item 1: (200×1) / 1400 = scale value 1
- Item 2: (300×2) / 1400 = scale value 2
- Item 3: (200×3) / 1400 = scale value 3
3. Calculate the final shrinkage size:
- Item one needs to shrink: Scale value 1 x 300
- Item two needs to shrink: Scale value 2 × 300
- Item three needs to shrink: Scale value 3 × 300
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>11_伸缩项目_缩</title> <style> .outer { width: 400px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; flex-grow: 1; } .inner1 { flex-shrink: 1; } .inner2 { flex-shrink: 2; width: 300px; } .inner3 { flex-shrink: 3; } </style> </head> <body> <div class="outer"> <div class="inner inner1"> <div style="width: 50px;height:50px;background-color: green;">1</div> </div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>
1.11 flex composite properties
- flex is a compound property, which is compounded: flex - grow , flex - shrink , flex - basis three properties, the default value is 0 1 auto .
- If you write flex:1 1 auto , it can be abbreviated as: flex:auto
- If you write flex:1 1 0 , it can be abbreviated as: flex:1
- If you write flex:0 0 auto , it can be abbreviated as: flex:none
- If you write flex:0 1 auto , it can be abbreviated as: flex:0 auto — that is, the initial value of flex .
1.12 Item Sorting
- The order attribute defines the sort order of the items. The smaller the value, the higher the arrangement, and the default is 0 .
1.13 Alignment alone
- Through the align - self attribute, the alignment of a flexible item can be adjusted independently
- The default value is auto , which means inheriting the align - items attribute of the parent element.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>13_项目排序与单独对齐</title> <style> .outer { width: 600px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向，水平从左到右，默认 */ flex-direction: row; /* 主轴换行方式，换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; /* 可以拉伸 可以压缩 设置基准长度为0，可简写为：flex:1 */ flex: 1 1 0; } .inner1 { order: 3; } .inner2 { order: 2; } .inner3 { order: 1; } .inner2 { align-self: center; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>
epilogue
I will continue to update the article! I hope everyone will click three times , your encouragement is the motivation for the author to keep updating
