Front-end er-must know flex layout

Language 2022-04-12 12:12:54 views: null

Get into the habit of writing together! This is the sixth day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event

1. What is Flex layout

  • Flex is the abbreviation of Flexible Box, which means " flexible layout ", which is used to provide maximum flexibility for the box model .
  • The Flexbox module provides an efficient layout method that can intelligently and flexibly adjust and allocate the relationship between elements and space even without knowing the size of the viewport or unknown elements. A simple understanding is that it can automatically adjust and calculate the size of the element in the container space .

2. How to get started with Flex

  1. To use Flex, you need to make the parent element into a Flex container, that is, set the displayproperty to flex, as simple as that

    image-20220111222830750

     <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Use Flex</title>
 </head>
 <body>
 ​
   <!-- 默认 -->
   <div id="default">
     <div class="item">默认</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- Flex -->
   <div id="flex">
     <div class="item">flex</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <style>
     #default{
       border: 1px solid #999;
       margin-bottom: 20px;
    }
     #default .item{
       width: 100px;
       height: 100px;
       background-color: tomato;
       margin: 10px;
    }
 ​
     #flex{
       display: flex;
       border: 1px solid #999;
    }
     #flex .item{
       width: 100px;
       height: 100px;
       background-color: thistle;
       margin: 10px;
    }
   </style>
 </body>
 </html>
复制代码

  2. Keywords:

    • Flex container: The parent element is displayed with display:flex set
    • Flex items: sub-items inside a flex container

3. Flex container properties

  • flex-direction : Controls the arrangement direction of items
  • flex-wrap : control the line wrapping rules
  • flex-flow : shorthand for direction and wrap
  • justify-content : the alignment of the item on the main axis
  • align-items : the alignment of items on the cross axis
  • align-content : the alignment of multiple axes, does not work in a single axis

1. flex-direction

Function: Control the arrangement direction of items along the main axis

默认值： row

取值： flex-direction：row | column | row-reverse | column-reverse

row： 默认值，沿主轴的方法排列

column： 沿交叉轴的方向排列

row-reverse： 沿主轴方向反向排列

column-reverse： 沿交叉轴方向反向排列

示例：

image-20220111221924088

image-20220111222015776

代码示例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Felx Demo</title>
 </head>
 <body>
   <!-- flex-direction: row -->
   <div class="root1">
     <div class="item">flex-direction: row(默认)</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- flex-direction: cloumn -->
   <div class="root2">
     <div class="item">flex-direction: column</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- flex-direction: row-reverse -->
   <div class="root3">
     <div class="item">flex-direction: row-reverse</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- flex-direction: column-reverse -->
   <div class="root4">
     <div class="item">flex-direction: column-reverse</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <style>
     .root1{
       display: flex;
       flex-direction: row;
       margin-bottom: 30px;
       border: 1px solid #999;
    }
     .root1 .item{
       width: 100px;
       height: 100px;
       background-color: yellowgreen;
       margin: 10px;
    }
 ​
     .root2{
       display: flex;
       flex-direction: column;
       margin-bottom: 30px;
       border: 1px solid #999;
    }
     .root2 .item{
       width: 100px;
       height: 100px;
       background-color: yellowgreen;
       margin: 10px;
    }
 ​
     .root3{
       display: flex;
       flex-direction: row-reverse;
       margin-bottom: 30px;
       border: 1px solid #999;
    }
     .root3 .item{
       width: 100px;
       height: 100px;
       background-color: yellowgreen;
       margin: 10px;
    }
 ​
     .root4{
       display: flex;
       flex-direction: column-reverse;
       margin-bottom: 30px;
       border: 1px solid #999;
    }
     .root4 .item{
       width: 100px;
       height: 100px;
       background-color: yellowgreen;
       margin: 10px;
    }
 ​
     
   </style>
 </body>
 </html>
复制代码

2. flex-wrap

作用： 控制项目换行规则

默认值： nowrap

取值： flex-wrap：nowrap | wrap | wrap-reverse

row： 默认值，不换行（宽度不够会自动压缩内容宽度）

wrap： 正常换行

wrap-reverse： 向上换行

示例：

image-20220111223927485

代码示例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>flex-wrap-demo</title>
 </head>
 <body>
 ​
   <!-- flex-wrap: wrap-reverse -->
   <div id="root1">
     <div class="item">flex-wrap: wrap-reverse</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
   </div>
 ​
   <!-- flex-wrap: wrap -->
   <div id="root2">
     <div class="item">flex-wrap: wrap</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
   </div>
 ​
    <!-- flex-wrap: nowrap(默认) -->
    <div id="root3">
     <div class="item">flex-wrap: nowrap</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
   </div>
 ​
   <style>
     #root1{
       display: flex;
       flex-wrap: wrap-reverse;
       border: 1px solid #999;
       margin-bottom: 10px;
    }
     #root1 .item{
       width: 100px;
       height: 100px;
       background-color: violet;
       margin: 10px;
    }
 ​
     #root2{
       display: flex;
       flex-wrap: wrap;
       border: 1px solid #999;
       margin-bottom: 10px;
    }
     #root2 .item{
       width: 100px;
       height: 100px;
       background-color: violet;
       margin: 10px;
    }
 ​
     #root3{
       display: flex;
       flex-wrap: nowrap;
       border: 1px solid #999;
       margin-bottom: 10px;
    }
     #root3 .item{
       width: 100px;
       height: 100px;
       background-color: violet;
       margin: 10px;
    }
   </style>
 </body>
 </html>
复制代码

3.flex-flow

作用： direction和wrap的简写

默认值： row nowrap

取值： flex-wrap：direction和wrap的搭配

direction： row | column | row-reverse | column-reverse

wrap： nowrap | wrap| wrap-reverse

4.justify-content

作用： 项目在主轴上的对齐方式

默认值： flex-start

取值： justify-content：flex-start | flex-end | center | space-between | space-around

flex-start： 向主轴开始的方向对齐

flex-end： 向主轴结束的方向对齐

center： 居中对齐

space-between： 两端对齐

space-around： 只有 flex 元素之间的空间是相等的，第一个 flex 元素和最后一个 flex 元素和容器的空间是 flex 元素间空间的一 半

space-evenly: 元素和元素之间空间相等

space-around 和 space-evenly区别：

image-20220111225749814

示例：

image-20220111225911802

代码示例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>justify-content-demo</title>
 </head>
 <body>
 ​
   <!-- justify-content: flex-start -->
   <div id="root1">
     <div class="item">justify-content: flex-start</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- justify-content: flex-end -->
   <div id="root2">
     <div class="item">justify-content: flex-end</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- justify-content: center -->
   <div id="root3">
     <div class="item">justify-content: center</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- justify-content: space-between -->
   <div id="root4">
     <div class="item">justify-content: space-between</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- justify-content: space-around -->
   <div id="root5">
     <div class="item">justify-content: space-around</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <!-- justify-content: space-evenly -->
   <div id="root6">
     <div class="item">justify-content: space-evenly</div>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
 ​
   <style>
     #root1{
       display: flex;
       justify-content: flex-start;
       border: 1px solid #999;
       margin: 20px;
    }
     #root1 .item{
       width: 100px;
       height: 100px;
       background-color: cadetblue;
       margin: 10px;
    }
 ​
     #root2{
       display: flex;
       justify-content: flex-end;
       border: 1px solid #999;
       margin: 20px;
    }
     #root2 .item{
       width: 100px;
       height: 100px;
       background-color: cadetblue;
       margin: 10px;
    }
 ​
     #root3{
       display: flex;
       justify-content: center;
       border: 1px solid #999;
       margin: 20px;
    }
     #root3 .item{
       width: 100px;
       height: 100px;
       background-color: cadetblue;
       margin: 10px;
    }
 ​
     #root4{
       display: flex;
       justify-content: space-between;
       border: 1px solid #999;
       margin: 20px;
    }
     #root4 .item{
       width: 100px;
       height: 100px;
       background-color: cadetblue;
       margin: 10px;
    }
 ​
     #root5{
       display: flex;
       justify-content: space-around;
       border: 1px solid #999;
       margin: 20px;
    }
     #root5 .item{
       width: 100px;
       height: 100px;
       background-color: cadetblue;
       margin: 10px;
    }
 ​
     #root6{
       display: flex;
       justify-content: space-evenly;
       border: 1px solid #999;
       margin: 20px;
    }
     #root6 .item{
       width: 100px;
       height: 100px;
       background-color: cadetblue;
       margin: 10px;
    }
   </style>
 </body>
 </html>
复制代码

5.align-items

作用： 项目在交叉轴上的对齐方式

默认值： stretch

取值： align-items：flex-start | flex-end | center | stretch | baseline

flex-start： 交叉轴开始的方向对齐

flex-end： 向交叉轴结束的方向对齐

center： 居中对齐

stretch： 将项目拉到和容器一样长

baseline： 沿项目第一行文字的底部对齐

示例：

image-20220111231524203

代码示例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>align-items-demo</title>
 </head>
 <body>
   <!-- align-item: flex-start -->
   <div id="root1">
     <div class="item">align-item: flex-start</div>
     <div class="item" style="height: 30px;">1</div>
     <div class="item" style="height: 40px">2</div>
     <div class="item" style="height: 80px;">3</div>
   </div>
 ​
   <!-- align-item: flex-end -->
   <div id="root2">
     <div class="item">align-item: flex-end</div>
     <div class="item" style="height: 30px;">1</div>
     <div class="item" style="height: 40px">2</div>
     <div class="item" style="height: 80px;">3</div>
   </div>
 ​
   <!-- align-item: center -->
   <div id="root3">
     <div class="item">align-item: center</div>
     <div class="item" style="height: 30px;">1</div>
     <div class="item" style="height: 40px">2</div>
     <div class="item" style="height: 80px;">3</div>
   </div>
 ​
   <!-- align-item: stretch -->
   <div id="root4">
     <div class="item">align-item: stretch</div>
     <div class="item" style="height: 30px;">1</div>
     <div class="item" style="height: 40px">2</div>
     <div class="item" style="height: 80px;">3</div>
   </div>
 ​
   <!-- align-item: baseline -->
   <div id="root5">
     <div class="item">align-item: baseline</div>
     <div class="item" style="height: 30px;">1</div>
     <div class="item" style="height: 40px">2</div>
     <div class="item" style="height: 80px;">3</div>
   </div>
 ​
 ​
 ​
   <style>
     #root1{
         display: flex;
         align-items: flex-start;
         background-color: silver;
         margin-bottom: 20px;
 ​
    }
     #root1 .item{
       width: 300px;
         background-color: blueviolet;
         margin: 10px;
    }
 ​
     #root2{
         display: flex;
         align-items: flex-end;
         background-color: silver;
         margin-bottom: 20px;
    }
     #root2 .item{
       width: 300px;
       background-color: blueviolet;
       margin: 10px;
    }
 ​
     #root3{
         display: flex;
         align-items: center;
         background-color: silver;
         margin-bottom: 20px;
    }
     #root3 .item{
       width: 300px;
       background-color: blueviolet;
       margin: 10px;
    }
 ​
     #root4{
         display: flex;
         align-items: stretch;
         background-color: silver;
         margin-bottom: 20px;
    }
     #root4 .item{
       width: 300px;
       background-color: blueviolet;
       margin: 10px;
    }
 ​
     #root5{
         display: flex;
         align-items: baseline;
         background-color: silver;
         margin-bottom: 20px;
    }
     #root5 .item{
       width: 300px;
       background-color: blueviolet;
       margin: 10px;
    }
   </style>
 </body>
 </html>
复制代码

6.align-content

作用： 项目在容器里的排列方式

默认值： stretch

取值： align-content：flex-start | flex-end | stretch | baseline

flex-start： 交叉轴开始的方向对齐

flex-end： 向交叉轴结束的方向对齐

center： 居中对齐

stretch： 会拉伸项目，让它们适应flex容器的空间

示例：

暂无示例

代码示例：

 <style>
     #box{
         display: flex;
         align-content: flex-start;
         /* align-content: flex-end; */
         /* align-content: center; */
         /* align-content: stretch; */
         flex-flow: row wrap;
         background-color: silver;
         height: 700px;
    }
     .item{
         width: 250px;
         height: 250px;
         background-color: blueviolet;
         margin: 8px;
 ​
    }
 </style>
 ​
 <div id="box">
     <div class="item"><h1>1</h1></div>
     <div class="item"><h1>2</h1></div>
     <div class="item"><h1>3</h1></div>
     <div class="item"><h1>4</h1></div>
     <div class="item"><h1>5</h1></div>
     <div class="item"><h1>6</h1></div>
     <div class="item"><h1>7</h1></div>
     <div class="item"><h1>8</h1></div>
     <div class="item"><h1>9</h1></div>
 </div>
复制代码

四.Flex项目属性

  • order：给Flex容器中的项目排序
  • flex-grow：
  • flex-shrink：
  • flex-basis：

1.order

作用： 可通过设置order值，改变项目的显示顺序

默认值： 0

规则： Flex会根据项目的order值，从低到高排列项目，如果具有相同的order值，在HTML中靠前的在前面

示例：

flex-order

代码示例：

 <style>
     #box{
         display: flex;
         flex-flow: row wrap;
         background-color: silver;
    }
    .item{
         width: 100px;
         height: 100px;
         background-color: blueviolet;
         margin: 8px;
    }
     div:nth-child(1){
         order: 1;
    }
 </style>
 ​
 <div id="box">
         <div class="item"><h1>1</h1></div>
         <div class="item"><h1>2</h1></div>
         <div class="item"><h1>3</h1></div>
         <div class="item"><h1>4</h1></div>
         <div class="item"><h1>5</h1></div>
 </div>
复制代码

2.flex-grow和flex-shrink

作用： 放大和缩小flex容器中的项目

规则： 它们都可以接受0或者大于0的正数

默认值： flex-grow默认值为0，flex-shrink默认值为1

说明： 值为0说明放大和缩小开关关闭，否则打开

示例：

flex-flex_grow

代码示例：

     <style>
          #box{
              display: flex;
              flex-flow: row wrap;
              background-color: silver;
          }
          .item{
              width: 100px;
              height: 100px;
              flex-grow: 1;
              background-color: blueviolet;
          }
     </style>
     <div id="box">
         <div class="item"><h1>1</h1></div>
     </div>
复制代码

3.flex-basis

含义： 指定项目的初始大小

默认值： auto，根据内容来计算

注意： 值为0时，也要写单位，0px

示例：

flex-flex_basis

代码示例：

 <style>
     #box{
         display: flex;
         flex-flow: row wrap;
         background-color: silver;
    }
     .item{
         background-color: blueviolet;
         flex-basis: 200px;
    }
 </style>
 ​
 <div id="box">
     <div class="item">hello,my name is 小明，i like play basketball</div>
 </div>
复制代码

4.flex

含义： flex-grow，flex-shrink，flex-basis的缩写

顺序： flex-grow第一，flex-shrink第二，flex-basis第三

默认值： flex：0，1，auto；

注意： 如果没有设置flex-basis的值，默认值则为0，这是flex的绝对项目，如果设置了flex-basis的值，就是一个flex的相对项目

有用的flex值：

  • flex：0,1，auto；默认值
  • flex：0,0，auto；类似于一个固定的元素，不会随浏览器窗口的改变而改变元素大小
  • flex：1,1，auto；项目会随着flex容器和浏览器窗口的改变而放大和缩小

5.align-self

作用： 针对于单个项目的交叉轴位置，不影响其它项目

默认值： stretch

取值： align-self：auto | flex-start | flex-end | stretch | baseline | center

flex-start： 交叉轴开始的方向对齐

flex-end： 向交叉轴结束的方向对齐

center： 居中对齐

stretch： 会拉伸项目，让它们适应flex容器的空间

baseline: The bottom of the first line of the project is aligned with the baseline

auto: Set the align-self property of the target item to the value of the align-items of the parent element, or stretch if the element has no parent element

Example:

flex-align_self

Code example:

 <style>
     #box{
         display: flex;
         flex-flow: row wrap;
         background-color: silver;
         height: 500px;
    }
     .item{
         background-color: blueviolet;
         flex-basis: 150px;
         height: 200px;
         margin: 10px;
    }
     .item:nth-child(1){
         background-color: tomato;
         align-self: flex-end;
         /* align-self: flex-start; */
         /* align-self: center; */
         /* align-self: stretch; */
         /* align-self: baseline; */
         /* align-self: auto; */
    }
 </style>
 ​
 <div id="box">
     <div class="item">hello,小明啊啊啊啊啊21323123jfkasfjlfljfk讲课费拉市第六届联发科</div>
     <div class="item">你好你好你好啊，小红</div>
     <div class="item">hello-world!-hwllo message</div>
 </div>
复制代码

5. Absolute and relative flex items

Difference: Spacing and how to calculate it

Relative items: The spacing of relative items is calculated based on the size of its content

Absolute items: Absolute items are only calculated based on the flex property , not the content

Note: When the third property of flex, that is, flex-basis is equal to 0, it is an absolute item, otherwise it is a relative item

Explanation: For relative items, the more content, the more space it takes up. For absolute items, it doesn't matter how much space is occupied by the content

Example:

flex-absolute_related

Code example:

 <style>
     #box{
         display: flex;
         flex-flow: row wrap;
         background-color: silver;
         height: 500px;
    }
     .item{
         background-color:tomato;
         /* auto,类似于 1,1,auto 即相对项目 */
         flex: auto;
         /* 1,类似于 1,1,0 即绝对项目 */
         /* flex:1; */
         margin: 10px;
 ​
    }
 </style>
 ​
 <div id="box">
     <div class="item">
        千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。
        春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
     </div>
     <div class="item">hello world!</div>
 </div>
复制代码

6. Auto-margin alignment

  • Beware of using margin:auto alignment in your project
  • When using margin:auto on an item, the item takes up all remaining space

Example:

flex-auto_margin

Code example:

 <style>
     #box{
         display: flex;
         background-color: silver;
         list-style-type: none;
         width: 1000px;
    }
     li{
         background-color:tomato;
         margin: 10px;
         flex: 0,0,auto;
    }
     li:nth-child(1){
         /* margin-left: auto; */
         /* margin-right: auto; */
         margin: auto;
    }
 </style>
 ​
 <ul id="box">
     <li>Home</li>
     <li>Study</li>
     <li>MyBlog</li>
     <li>life</li>
     <li>rest</li>
 </ul>
复制代码

Guess you like

Origin juejin.im/post/7085354502148063262
Recommended
The number of MaxKB GitHub Stars, an open source knowledge base question and answer system based on large language models, exceeded 5,000!
Ranking
Getting the basic concepts of ROS + catkin Profile
Spring Learning (2) --- Assembling Beans in the IoC Container
js to get the src attribute of the image regularly
STM32 is based on CubeIDE and HAL library basics entry study notes: Bluetooth WIFI STM32 connects to Alibaba Cloud
Short video learning - 3, pandas simple use of pivot_table
Print directory of project configuration log, output log
Understand the difference between vi and vim in Linux in 3 minutes
1 + x certificate Web front-end development HTML5 special exercises
mangodb save and insert the difference
7-1 Family tree processing (50 points) (binary tree solution)
Daily
More
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

Code World

© 2018 codetd.com