文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >动态调整宽度大小并包装嵌套的flexboxes

问动态调整宽度大小并包装嵌套的flexboxes
EN

Stack Overflow用户
提问于 2018-07-02 03:13:42
回答 2查看 117关注 0票数 2

我有一个div嵌套在一些flexboxes中的几层，它会根据文本的长度动态地改变宽度。

是否有可能让包含的flexboxes也改变宽度，并根据需要完全使用CSS进行包装？如果没有，我对任何JavaScript解决方案都持开放态度。

以下是我所说的更好的想法的视觉效果：

​

​

如果有人想要使用它，这里有一个代码片段：

​

代码语言：javascript
复制
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 auto;
  border: 1px solid black;
  margin: 5px;
}

.root {
  max-width: 600px;
  border: 1px solid black;
}

.level-2 {
  background-color: tomato;
}

.level-3 {
  background-color: cornflowerblue;
}
代码语言：javascript
复制
<div class="flex-container root">
  <div class="flex-container flex-item level-2">
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
  </div>
  <div class="flex-container flex-item level-2">
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some longest text over here</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
  </div>
</div>

​

html
css
flexbox
EN

回答 2

Stack Overflow用户

发布于 2018-07-02 06:38:28

我所能看到的最好的情况是有第一个和第二个案例。它不是100%完美的，但在调整大小时，你会看到1和2之间的转换：

​

代码语言：javascript
复制
* {
 box-sizing:border-box;
}

.container {
  background:red;
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.box {
  flex:1 0 50%;
  background:blue;
  border:1px solid;
  display:flex;
  padding:10px;
}
.box > span {
   background:#fff;
   border:1px solid;
  flex:1 0 50%;
  white-space:nowrap;
}
代码语言：javascript
复制
<div class="container">
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
</div>
<div class="container">
  <div class="box">
    <span>some text<br>some text long long long long text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2018-07-02 03:40:20

你应该看看这个：

​

代码语言：javascript
复制
function check(){
  var str = $('#text').val()  

    if (str.length < 15) {
      document.body.innerHTML = '';
      document.write('<style>');
      document.write('    .big_container{');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 47%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle{');
      document.write('      height: 50px;');
      document.write('      width: 49%;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('    .big_container2{');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container2{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .container3{');
      document.write('      padding: 5px;');
      document.write('      height: 105px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle3{');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      margin-top: 1px;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('</style>');
      document.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">');
      document.write('<\/script>');
      document.write('<input id="text">');//
      document.write('<button onclick="check()">Go !');
      document.write('</button>');


      document.write('<div class="big_container">');
      document.write('<div class="container">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle">'+str+'</div>');
      document.write('</div>');
      document.write('<div class="container">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle"></div>');
      document.write('</div>');
      document.write('</div>');

    }else if (str.length  < 35) {
      document.body.innerHTML = '';
      document.write('<style>');
      document.write('    .big_container{');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 47%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle{');
      document.write('      height: 50px;');
      document.write('      width: 49%;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('    .big_container2{');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container2{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .container3{');
      document.write('      padding: 5px;');
      document.write('      height: 105px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle3{');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      margin-top: 1px;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('</style>');
      document.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">');
      document.write('<\/script>');
      document.write('<input id="text">');//
      document.write('<button onclick="check()">Go !');
      document.write('</button>');


      
      document.write('<div class="big_container2">');
      document.write('<div class="container2">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle">'+str+'</div>');
      document.write('</div>');
      document.write('<div class="container2">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle"></div>');
      document.write('</div>');
      document.write('</div>');
    }else{  
      document.body.innerHTML = '';
      document.write('<style>');
      document.write('    .big_container{');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 47%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle{');
      document.write('      height: 50px;');
      document.write('      width: 49%;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('    .big_container2{');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container2{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .container3{');
      document.write('      padding: 5px;');
      document.write('      height: 105px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle3{');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      margin-top: 1px;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('</style>');
      document.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">');
      document.write('<\/script>');
      document.write('<input id="text">');//
      document.write('<button onclick="check()">Go !');
      document.write('</button>');


      
      document.write('<div class="big_container2">');
      document.write('<div class="container3">');
      document.write('<div class="redrectangle3">'+str+'</div>');
      document.write('<div class="redrectangle3"></div>');
      document.write('</div>');
      document.write('<div class="container3">');
      document.write('<div class="redrectangle3"></div>');
      document.write('<div class="redrectangle3"></div>');
      document.write('</div>');
      document.write('</div>');
    }

}
代码语言：javascript
复制
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<input id="text"><button onclick="check()">Go !</button>

​

票数 -2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51126259

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档