flex布局

最新推荐文章于 2023-02-06 10:40:14 发布
最新推荐文章于 2023-02-06 10:40:14 发布
阅读量636 收藏 2
点赞数 1
分类专栏： web 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45824445/article/details/104130138
版权

（一） 认识flex布局

flex布局完全可以代替浮动，浮动比较麻烦而且会带来高度坍塌。

如下外面的大框是flex-container,里面的小框是flex-item。
在这里插入图片描述
在这里插入图片描述
以下分析（上面为代码，下面为代码的效果图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .box{
         /* 开启flex布局有2个方法
         display: flex;块级元素
         display: inline-flex;行内元素 */
         display: flex;
         width: 5oopx;
         height: 300px;
         background-color: #f00;
     }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <strong>行内元素</strong>
</body>
</html>

当display为flex时也就是块级元素时，它和行内元素放在一起的效果如下：并不是放在同一行的
在这里插入图片描述

         display: inline-flex;

当display为inline-flex时也就是行内元素时，它和行内元素放在一起的效果如下：```
在这里插入图片描述
此时，行内元素和strong元素是在同一行显示的
说明inline可以用来强制不换行
两种布局是表示它到底是一个块级元素还是是一个行内的元素 ，在实际开发中把它当成一个块级元素使用来进行布局的情况较多

(二）flex的布局模型

在这里插入图片描述
可以将主轴理解为坐标轴中的x轴，交叉轴理解为y轴（默认情况下，没有改方向之前）

在没有进行flex布局，box中只有三个子元素时，代码和效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .box{
         width: 5oopx;
         height: 300px;
         background-color: #f00;
     }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <strong>行内元素</strong>
</body>
</html>

在这里插入图片描述

此时只能看到父元素这个盒子，里面的三个div子元素是看不见的，子元素有宽度是整个父元素的宽度，因为它是一个块级元素 ，所以占据父元素的宽度，但是没有高度所以都看不见，高度由内容支撑起来。往里面设置类和内容支撑起高度并区分，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .box{
         width: 5oopx;
         height: 300px;
         
         background-color:orange;
     }
     .item{
         width: 100px;
         height: 100px;
         color:white ;
         /* 使得文字居中 */
         text-align: center;
         line-height: 100px;
     }
      .item1{
         background-color: red;
      }  
      .item2{
          background-color: green;
        }  
     .item3{
          background-color: blue;
        }  
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
       
    <strong>行内元素</strong>
</body>
</html>

div是块级元素，独占一行
在这里插入图片描述

（三）flex-container的相关属性flex-direction（item在主轴和交叉轴的顺排和逆排）

在这里插入图片描述

下面开始布局：display:flex
         display:flex;

效果如下
在这里插入图片描述
块级元素本来是独占一行的，但是开启了display:flex便不再独占一行，因为一旦外面的盒子开启了布局，变成了flex-container它就不再区分块级元素和行内元素，也就是里面的子元素到底怎么排是flex说了算。之所以如上排是因为
在这里插入图片描述

 display:flex;
         /* flex-direction:决定主轴的方向，默认值是row 横着排自左向右 */
         flex-direction:row;

如下：效果和之前没有进行布局时无区别

     display:flex;
     /* flex-direction:决定主轴的方向，默认值是row 横着排自左向右 */
     flex-direction:row;

在这里插入图片描述

/* 把原来的主轴方向反转 */
flex-direction:row-reverse;

在这里插入图片描述

   display:flex;
      /* 以列为主轴，会从上往下排 */
         flex-direction:column;

在这里插入图片描述

 display:flex;
   /* 以列为主轴，会从下往上排 */
         flex-direction:column-reverse;

在这里插入图片描述

总结如下：
在这里插入图片描述

（四）flex-container的相关属性Justify-content(item在主轴上的对齐方式)

  display:flex;
     justify-content: flex-start;

在这里插入图片描述

  display:flex;
justify-content: flex-end;

在这里插入图片描述

 display:flex;
justify-content: center;
这次居中不需要用margin:0 auto 也不需要用什么text-align：center

在这里插入图片描述

 display:flex;
  justify-content: space-between;

在这里插入图片描述

 display:flex;
 justify-content: space-evenly;

在这里插入图片描述

  display:flex;
   justify-content: space-around;

在这里插入图片描述
总结如下：
在这里插入图片描述

（五）flex-container的相关属性align-items(item在交叉轴上的对齐方式)

container在以前没有设置高度时，它的高度是由内容决定的，内容有多高就把它撑起来多高。如下

.item{
     
         /* height: 100px; *
     }

在这里插入图片描述
但此时它并不是内容的高度，它对元素进行了拉伸，因为它有一个normal属性

 display:flex;
 align-items: normal;

在这里插入图片描述
和stretch一样 在这里插入图片描述
（拉伸的前提是没有给它设置高度 如果给container指定了高度，那么它就是指定的那个高度）
如下

.item{
        
         height: 100px;
       }

在这里插入图片描述

把几个子元素的高度设置成不一样进行比较：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .box{
         /* 开启flex布局有2个方法
         display: flex;块级元素
         display: inline-flex;行内元素 */
         /* display: flex; */
         /* display: inline-flex; */


         display:flex;
         /* flex-direction:决定主轴的方向，默认值是row 主轴排自左向右 */
         /* flex-direction:row; */

         /* 把原来的主轴方向反转  主轴自右向左 */
         /* flex-direction:row-reverse; */


         /* 以列为主轴，会从上往下排 */
         /* flex-direction:column; */

        /* 以列为主轴，会从下往上排 */
         /* flex-direction:column-reverse; */

         /* justify-content决定item在主轴的对齐方式 */
        /* justify-content: flex-start; */
        /* justify-content: flex-end; */
        /* justify-content: center; */
        /* justify-content: space-between; */
        /* justify-content: space-evenly; */
        /* justify-content: space-around; */

        /* align-items决定item在交叉轴的对齐方式  */
        /* align-items: normal; */
        
         width: 5oopx;
         height: 300px;
         
         background-color:orange;
         margin: 0 auto;
     }
     .item{
         width: 100px;
         height: 100px;
         color:white ;
         /* 使得文字居中 */
         text-align: center;
     }
      .item1{
         background-color: red;
         height: 60px;
      }  
      .item2{
          background-color: green;
          height: 150px;
        }  
     .item3{
          background-color: blue;
          height: 120px;
        }  
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
       
    <!-- <strong>行内元素</strong> -->
</body>
</html>

在这里插入图片描述
可见三个item在有高度的情况下是默认顶部对齐的

当设置为

 display:flex;
align-items: flex-start;
与上面一样的

在这里插入图片描述

display:flex;
  align-items: flex-end;
  由于只有一行就在交叉轴的底部依次对齐，多行的时候就不一样了

在这里插入图片描述

display:flex;
align-items: center;

在这里插入图片描述

display:flex;
    align-items: baseline;

在这里插入图片描述

 .item1{
         font-size: 50px;
      }  
        <div class="item item1">xitem1</div>
        基线在x底部  是跟基线对齐

在这里插入图片描述
在这里插入图片描述
注意 文本很多的情况永远也只是以第一行文本作为基线
在这里插入图片描述
总结如下：
在这里插入图片描述

（六）flex-container的相关属性flex-wrap(决定了flex container是单行还是多行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .box{
    
         display:flex;
         width: 550px;
         height: 400px;
         background-color:orange;
         margin: 0 auto;
     }
     .item{
         width: 100px;
         height: 100px;
         color:white ;
         /* 使得文字居中 */
         text-align: center;
         /* line-height: 100px; */
     }
      .item1{
         background-color: red;
      }  
      .item2{
          background-color: green;
        }  
     .item3{
          background-color: blue;
        }  
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
       
    <!-- <strong>行内元素</strong> -->
</body>
</html>

在这里插入图片描述

由此可见 它对item的宽度做了一个压缩
  /* 结论：默认情况下，所有的flex-items都会在同一行进行显示 当一行放不下的时候就会压缩进行显示，  不希望压缩的话就使用flex-wrap 默认情况是nowrap 不换行  
         换行的话就flex-wrap*/
         flex-wrap:wrap;

在这里插入图片描述

   /* 反转  用的比较少 */
         flex-wrap: wrap-reverse
  <div class="box">
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

        <div class="item item1">xitem4</div>
        <div class="item item2">item5</div>
        <div class="item item3">item6</div>

        <div class="item item1">xitem7</div>
        <div class="item item2">item8</div>
        <div class="item item3">item9</div>

反转前在这里插入图片描述
反转后
在这里插入图片描述在这里插入图片描述
如上图，wrap-reverse是在交叉轴上做的反转，在实际开发中用的非常少
在这里插入图片描述

（七）flex-container的缩写属性flex-flow(它是flex-direction和flex-wrap的简写)

 flex-wrap默认情况下是nowrap 单行
默认情况下 也就是不至于压缩的情况下flex-wrap=nowrap 是没换行的
flex-direction默认情况下是row 在主轴从左至右排列
         flex-flow:row-reverse ;这样相当于改变了主轴的一个方向 改成主轴从右至左排列
             flex-flow:row-reverse  wrap;

在这里插入图片描述

   /* 给他做一个平分 */
         justify-content: space-evenly;

在这里插入图片描述
如图就把剩余空间做了一个平分

（八）flex-container的属性align-content(决定多行items在交叉轴上的对齐方式)

align-item指的是单行item在交叉轴上的对齐方式
justify-content是指item在主轴上的对齐方式 主轴上的item多行则用flex-wrap

先改回正常：

flex-flow:row  wrap;
         justify-content: space-evenly;

在这里插入图片描述

 align-content: flex-start;

在这里插入图片描述

 align-content: flex-end;

在这里插入图片描述
在这里插入图片描述

align-content: center;

在这里插入图片描述

 align-content: space-between;

在这里插入图片描述

 align-content: space-evenly;

在这里插入图片描述

align-content: space-around;

在这里插入图片描述
总结如下：
在这里插入图片描述
container属性总结回顾
在这里插入图片描述
在这里插入图片描述

（九）flex-items的属性order

关闭flex布局时如下：每个块级元素都独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .box{
         /* 开启flex布局有2个方法
         display: flex;块级元素
         display: inline-flex;行内元素 */
         /* display: flex; */
         /* display: inline-flex; */


         /* display:flex; */

         
         width: 550px;
         height: 400px;
         
         background-color:orange;
         margin: 0 auto;
     }
     
     .item{
         width: 100px;
         height: 100px;
         color:white ;
         /* 使得文字居中 */
         text-align: center;
     }
      .item1{
        background-color: red;
        }  

      .item2{
          background-color: green;
        }  
     .item3{
          background-color: blue;
        }  
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

        <div class="item item1">xitem4</div>
        <div class="item item2">item5</div>
        <div class="item item3">item6</div>

        <div class="item item1">xitem7</div>
        <div class="item item2">item8</div>
        <div class="item item3">item9</div>
       
    <!-- <strong>行内元素</strong> -->
</body>
</html>

在这里插入图片描述

   .box{
   
         /* display:flex; */

         
         width: 550px;
         height: 400px;
         
         background-color:orange;
         margin: 0 auto;
     }
     
     .item{
         width: 100px;
         height: 100px;
         color:white ;
         /* 使得文字居中 */
         text-align: center;
     }
      .item1{
        background-color: red;
        }  

      .item2{
          background-color: green;
        }  
     .item3{
          background-color: blue;
        }  
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

在这里插入图片描述

一旦开启flex布局：
 display:flex;
 几个子元素就在主轴上依次排布

在这里插入图片描述
在这里插入图片描述
这个东西一般不是用的特别duo

.item1{
        background-color: red;
        order: 10;
        }  

      .item2{
          background-color: green;
          order: 6;
        }  
     .item3{
          background-color: blue;
          order: 100;
        }

在这里插入图片描述

（十）flex-items的属性align-self

.box{
     
         display:flex;

         
         width: 550px;
         height: 400px;
         
         background-color:orange;
         margin: 0 auto;
         align-items: center;
     }
     
     .item{
         width: 100px;
         height: 100px;
         color:white ;
 
         text-align: center;
     }
      .item1{
        background-color: red;
   
        }  

      .item2{
          background-color: green;
      
          height: 150px;
        }  
     .item3{
          background-color: blue;
       
        }

在这里插入图片描述

这个时候如果某一个想搞特殊  不想居中对齐 比如item3想底部对齐 
 .item3{
          background-color: blue;
          /* order: 100; */
          align-self: flex-end;
        }

在这里插入图片描述

 .item3{
          background-color: blue;
          /* order: 100; */
          align-self: flex-end;
        }  
        这个属性它会覆盖上面父元素.box{
         align-items: center;
     }中的这个属性

在这里插入图片描述

（十一）flex-items的属性flex-grow

在这里插入图片描述
目前是依次排列的，子元素装不满父元素，希望把子元素进行一个拉伸把父元素最终充满

.box{
         width: 500px;
    }

子元素各占一百还剩200px 让它三平分
在这里插入图片描述
也就是让每一个grow66.666

 .item1{
        flex-grow: 1;
        }  

      .item2{

          flex-grow: 1;
        }  
     .item3{
     
          flex-grow: 1;
        }  
        效果如下：原来是100  现在就是166.67

在这里插入图片描述

在flex-grow大于1的情况下
 .item1{
        flex-grow:2;
        }  

      .item2{

          flex-grow:2;
        }  
     .item3{
     
          flex-grow:1;
        }  
        意味着200px/5=40px 80px  80px 20px

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在flex-grow小于1的情况下,也就是没有大于1时它不会把剩余的空间全部给它装满，之前没有给它flex值的时候 它是多宽就有多宽，现在是小数就用小数乘以剩余的宽度
0.2*200=40px
 .item1{
        flex-grow:.2;
        }  

      .item2{

          flex-grow:.2;
        }  
     .item3{
     
          flex-grow:.2;
        }

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

   .item3{
     
          flex-grow:.3;
        }  
        0.3*200=60px

在这里插入图片描述
总结如下：
在这里插入图片描述
（

十二）flex-items的属性flex-shrink

很多item的情况下它会收缩，但是收缩的最小宽度不会把文字挤到。

 <div class="box">
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item1">xitem1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
</div>

在这里插入图片描述

.box{
width:550px
}
.item{
         width: 250px;
         }
        三个item就是750px
        放不下item就会自动收缩，一般这个时候就设置flex-wrap:wrap 不换行的话750px-550px=200px
        平分收缩：200/3=66.66px
        250px-66.666px=183.33px

在这里插入图片描述
由此可见确实收缩了
在这里插入图片描述

  .item1{
        flex-shrink: 2;
        }  

      .item2{
          flex-shrink:2;
        }  
     .item3{
          flex-shrink: 1;
        }  
        200px/5=40px
        分别要收缩80px  80px 40px  
        前两个250-80=170px
        后面那个250px-40=210px

如下：
在这里插入图片描述在这里插入图片描述

  .item1{
        flex-shrink: .2;
        }  

      .item2{
          flex-shrink:.2;
        }  
     .item3{
          flex-shrink: .2;
        }  
        这种情况每个收缩40，就把它收缩完了
        这种在实际开发中用的很少

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

十三）flex-items的属性flex-basis（可与设置主轴上面item的大小）

 .item{
         width: 100px;
}

在这里插入图片描述

现在的宽度是由width决定的，但是可以在item里面写一个东西
 .item1{
     
        flex-basis: 200px;
        }
如果给它的值为auto的话，那它的宽度是多少它就多大

在这里插入图片描述

如果同时设置
  .item{
         width: 100px;
     }
      .item1{
        flex-basis: 200px;
        }  
下面这个会起作用

一般较少运用，但是要注意优先级
在这里插入图片描述

十四）flex-items的属性flex

在这里插入图片描述
在这里插入图片描述

都柏林往事
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex布局
03-29
Flex布局 简介 Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在...
html篇：flex布局
Coder-coco的博客
04-18 1761
Flex布局（超重要app，小程序，pc端用到的超级多） 正在上传…重新上传取消 两个概念container和items 正在上传…重新上传取消 开启flex:display:flex:(inliner-flex) Flex布局模型 正在上传…重新上传取消 开启flex 正在上传…重新上传取消 变成 Flex的相关属性 正在上传…重新上传取消 Flex-container1-5属性 Flex-items6-10属性 Flex-container属...
浅谈flex布局
?sonder* 的博客
12-05 1106
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
FLEX 如何彻底清空
05-07
在FLEX 里,解决FLEX 占用内存一直不减，无法清除的问题
完美扫清Flex布局
不停
03-17 1554
文章目录一 初识flex二 flex container上的CSS1. flex-direction（决定main axis的方向）2. justify-content（决定flex items 在main axis的对齐方式）3. align-content（决定flex items 在cross axis上的对齐方式）4. align-items（决定flex items在cross axis...
详细讲解flex布局
weixin_47192981的博客
02-06 9744
关于flex布局基础知识差不多介绍完了，这个布局是我平时使用很多的一个布局，可以解决很多手动排版以及图片与文字对齐等等的问题，希望大家可以掌握好这个布局，会十分得心应手！即，定义时要将flex定义在父元素，把父元素当做‘容器’，然后改变内部子元素的排列方式。如上图，父元素宽度已经不能承载所有子元素放到一行，但是由于没有设置换行，所以会压缩子元素，强制排到一行。在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。主轴和交叉轴是垂直的，两个轴的由来取决于子元素的排列方式，如图。
html 清除flex,css如何重置flex项的'display'属性_css3_开发99编程知识库
weixin_42347660的博客
06-17 3610
我試圖將基於表和JS的舊布局轉換為新的Flexbox，並通過保持舊瀏覽器的表向後兼容。問題是，沒有 display:flex-item 可以替代舊的display:table-cell 樣式。我嘗試了不同的定義，比如 display:inherit，display:initial，但無法重置顯示定義以正常工作。username, email, etc./* CSS Table Layout */....
CSS之flex布局详解
weixin_46820017的博客
05-06 1990
前言 CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。 flex 初体验 我们先来看看下面这个最简单的布局： 上面这张图中的布局是我们都熟悉的：默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。 在此基础之上，如果我给父容器仅仅加一个 display: flex属性，此时，这些子元素的布局会摇身一变： 没错，子元素们会在水平方向上，从左至右排列
Flex刷新当前页面和关闭浏览器
l5751311的专栏
03-02 1727
刷新页面: navigateToURL(new URLRequest("javascript:location.reload();"),"_self"); 关闭浏览器: navigateToURL(new URLRequest("javascript:location.close();"),"_self") ;
前端布局神器display:flex
robinhunan的博客
01-26 2900
近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout Module）是这些新布局工具中的第一个，接着是CSS网格布局模块（CSS Grid Layout Module）。我们会在本文给出一个易于理解的flexbox入门介绍。
前端知识点（三）：Flex布局（弹性布局）
蒋小姐的博客
12-14 1292
1.定义flex布局 (1)display:flex; (2)行内元素 display:inline-flex; 父元素中设置为flex布局，形成flex容器。子元素的float、clear、vertical-align属性将失效。 2.Flex容器属性--定义在父元素中 排列： （1）flex-direction：决定了主轴的方向(子元素的排列方向) row:(默认)水平方向从左到右为主轴； row-reverse:水平方向从右到左为主轴； column:垂直方向从上到下为主轴； co
主流布局 flex布局
最新发布
04-25
Flex布局（也称为弹性布局）是种主流的CSS布局方式，它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。 在Flex布局中，有两个重要的概念：容器和子元素。容器是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值