flex布局的属性

最新推荐文章于 2023-07-01 23:27:54 发布

简宁909

最新推荐文章于 2023-07-01 23:27:54 发布

阅读量188

点赞数

文章标签： css

本文链接：https://blog.csdn.net/coco_998/article/details/118356307

版权

当父元素用flex布局时，它的子元素可以用flex-grow、flex-shrink、flex-basis属性设置，父元素在不同宽度下，子元素是如何分配父元素空间的

flex-grow、flex-shrink、flex-basis三个属性的作用：

flex-grow： 当父元素的宽度大于里面的子元素宽度，就是父元素有剩余宽度，或是子元素想分配父元素的剩余宽度，就可以用此属性设置。flex-grow的默认值为0，意思是该元素不分配父元素的剩余空间，如果值大于0，表示索取。值越大，分配的越多。

假如：父元素宽400px，有两个子元素：A和B。A宽为100px，B宽为200px。则空余空间为 400-（100+200）= 100px。如果A，B都不索取剩余空间，则有100px的空余空间。

两者其中一个分配剩余空间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局</title>
  <style>
     .firstBox{
       width: 400px;
       height: 400px;
       display: flex;
       background-color: blue;
     }
     .left{
       width: 100px;
       height: 300px;
       background-color: red;
   
     }
     .right{
       width: 200px;
       height: 300px;
       background-color: yellowgreen;
       flex-grow: 1;
     }
  </style>
</head>
<body>
  <div class="firstBox">
    <div class="left">左子元素</div>
    <div class="right">右子元素</div>
 </div>
</body>
</html>

当两个都想分配空间，flex-grow都大于0时，就按比例划分剩余空间，

如果A，B都设索取剩余空间，A设置flex-grow为1，B设置flex-grow为2。则最终A的大小为自身宽度（100px）+ A获得的剩余空间的宽度（100px (1/(1+2))）,最终B的大小为自身宽度（200px）+ B获得的剩余空间的宽度（100px (2/(1+2))）

flex-shrink：该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局</title>
  <style>
     .firstBox{
       width: 400px;
       height: 400px;
       display: flex;
       background-color: blue;
     }
     .left{
       width: 300px;
       height: 300px;
       background-color: red;
     /* flex-grow: 1; */
      flex-shrink:0;

     }
     .right{
       width: 200px;
       height: 300px;
       background-color: yellowgreen;
       /* flex-grow: 1; */
       flex-shrink:0;

     }
  </style>
</head>
<body>
  <div class="firstBox">
    <div class="left">左子元素</div>
    <div class="right">右子元素</div>
    <!-- 父元素 -->
 </div>
</body>
</html>

设为1时不超出

flex-basis：该属性用来设置元素的宽度,大家都知道用width设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。

如下图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局</title>
  <style>
     .firstBox{
       width: 400px;
       height: 400px;
       display: flex;
       background-color: blue;
     }
     .first{
       width: 400px;
       height: 300px;
       flex-basis: 300px;
       background-color: red;
     }
  </style>
</head>
<body>
  <div class="firstBox">
    <div class="first">里面子元素</div>
 </div>
</body>
</html>

flex是flex-grow，flex-shrink, flex-basis 的缩写规则：

flex 取值为 none，则计算值为 0 0 auto


.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;

当 flex取值为 auto，则计算值为 1 1 auto

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

如上就是这三个属性常见的用法

简宁909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局的属性

flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是 flex-basis ，basis英文意思是<主要成分>，所以他和width放在一起时,肯定把width干掉，basis遇到width时就会说我才是最主要的成分，..
复制链接

扫一扫