前端er-必知必会Flex布局

编程语言 2022-04-12 12:12:22 阅读次数: 0

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情

一.Flex布局是什么

  • Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
  • Flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之关的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。

二.如何开始使用Flex

  1. 要使用Flex，需要使父元素变成一个Flex容器，即将父元素的 display 属性设置为 flex，就这么简单

    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. 关键字：

    • Flex容器： 父元素显示的设置了 display:flex
    • Flex项目： Flex容器内的子项目

三.Flex容器属性

  • flex-direction：控制项目排列方向
  • flex-wrap：控制换行规则
  • flex-flow：direction和wrap的简写
  • justify-content：项目在主轴上的对齐方式
  • align-items：项目在交叉轴上的对齐方式
  • align-content：多根轴线的对齐方式，在单轴中不起作用

1. flex-direction

作用： 控制项目沿主轴的排列方向

默认值： 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： 项目首行内容底部为基准线对齐

auto： 将目标项目的align-self属性设置为父元素的align-items的值，如果该元素没有父元素，就为stretch

示例：

flex-align_self

代码示例：

 <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>
复制代码

五.绝对和相对Flex项目

区别： 间距以及如何计算间距

相对项目： 相对项目的间距是根据它的内容大小来计算的

绝对项目： 绝对项目只根据flex属性来计算，而不是内容

注意： 当flex的第三个属性，即flex-basis等于0时，是绝对项目，否则都是相对项目

解释： 对于相对项目，内容越多，占用的空间越大。对于绝对项目，占用的空间跟内容多少没关系

示例：

flex-absolute_related

代码示例：

 <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>
复制代码

六.Auto-margin对齐

  • 当心在项目中使用margin：auto对齐
  • 当在项目上使用margin：auto时，该项目会占据所有的剩余空间

示例：

flex-auto_margin

代码示例：

 <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>
复制代码

猜你喜欢

转载自juejin.im/post/7085354502148063262
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022