Question

我有一个div在一些flexbox中嵌套了几层，根据其文本的长度来动态改变宽度。

是否有可能使包含的弹性框也更改宽度并按需使用CSS进行包装？如果没有，我愿意接受任何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;
}

<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>

Answer 1

对此我能看到的最好的情况是具有第一和第二种情况。它不是100％完美，但是在调整大小时，您会看到1和2之间的转换。

* {
 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;
}

<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>

Answer 2

您应该看这个：

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>');
    }

}

<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 个答案: