Css3弹性盒子实现自适应功能方法

最新推荐文章于 2023-06-14 10:27:12 发布

那是遇知吧

最新推荐文章于 2023-06-14 10:27:12 发布

阅读量1.1k

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_41406727/article/details/120140315

版权

1：只显示最多10条数据，高度自适应

<template>
    <div id="app">
       <div class="content">
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
       </div>
    </div>
</template>

<script>
    
</script>

<style>
  #app {
      height:100%;
      width:100%;
      display: flex;
      align-items: center;
      justify-content: center;
         
  }
.content {
    height:100%;
    width:400px;
    display:grid;
    grid-template-rows: repeat(10,10%);
    border: 1px solid red; 
}
p {
    margin:0;
    display: flex;
    align-items: center;
}
</style>

当我把高度缩小

可以看到文字随着高度自适应了

当数据不足10条时

<template>
    <div id="app">
       <div class="content">
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
           <p>111111111111111111111111</p>
       </div>
    </div>
</template>

2：宽度自适应的实现

<template>
    <div id="app">
       <div class="content">
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
           <p><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></p>
       </div>
    </div>
</template>

<script>
    
</script>

<style>
  #app {
      height:100%;
      width:100%;
      display: flex;
      align-items: center;
      justify-content: center;
         
  }
.content {
    height:100%;
    width:100%;
    display:grid;
    grid-template-rows: repeat(10,10%);
    border: 1px solid red; 
}
p {
    margin:0;
    text-align:center;
    display:grid;
    grid-template-columns: repeat(5,20%);
}
</style>

当我改变屏幕宽度时