CSS: 使 Flexbox 布局静态化

Question

我正在尝试将一些内容放入弹性布局行中，我注意到

该行随其内容调整宽度

相反，我尝试使行的宽度保持不变，这样每一个更大的 child 都会中断。

CodeMirror editor只是用来说明那一行更大and/or更小children的问题

看看这个Fiddle

#main {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  .flex {
    width: 100%;
    &:nth-child(2) {
      background: red;
    }
    #wrapper #item {
      background: blue;
    }
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
 var ce = document.getElementById("item");

var myCodeMirror = CodeMirror(function(node){ce.parentNode.replaceChild(node, ce);}, {
  value: "function myScript(){return 100;}",
  mode:  "javascript",
  lineSeparator: null,
  theme: "default", // theme directory
  indentUnit: 2,
  smartIndent: true,
  tabSize: 2,
  indentWithTabs: false,
  electricChars: true,
  extraKeys: null,
  lineWrapping: false,
  lineNumbers: true,
  firstLineNumber: 1,
  scrollbarStyle: "overlay",
  inputStyle: "contenteditable",
  readOnly: false, // also "nocursor"
  showCursorWhenSelecting: false,
  lineWiseCopyCut: true,
  undoDepth: 200,
  historyEventDelay: 1250,
  autofocus: true
});

});
</script>

<div id="main">
  <div class="flex">ABC</div>
  <div class="flex">
    DEF
    <div id="wrapper">
      <div id="item">
      </div>
    </div>
  </div>
  <div class="flex">GHI</div>
</div>

我该怎么做？

Answer 1

这里需要用到JavaScript。只需获取中间 flex 元素的 width（在我的例子中，它的 class 是 .codemirror），然后将 width 应用于自身。喜欢：

// Used setTimeout to get the plugin initialized
setTimeout(function() {
  var codemirror_width = $('.flex.codemirror').width();
  $('.flex.codemirror').css('width', codemirror_width);
}, 100);

看看下面的工作片段：

setTimeout(function() {
  var codemirror_width = $('.flex.codemirror').width();
  $('.flex.codemirror').css('width', codemirror_width);
}, 100);

#main {
  display: flex;
  justify-content: space-between;
  height: 100vh;
}
#main .flex {
  width: 100%;
}
#main .flex:nth-child(2) {
  background: red;
}
#main .flex #wrapper #item {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css" rel="stylesheet"/>
<script type="text/javascript">
 $(document).ready(function(){
  var ce = document.getElementById("item");
  
    var myCodeMirror = CodeMirror(function(node){ce.parentNode.replaceChild(node, ce);}, {
      value: "function myScript(){return 100;}",
      mode:  "javascript",
      lineSeparator: null,
      theme: "default", // theme directory
      indentUnit: 2,
      smartIndent: true,
      tabSize: 2,
      indentWithTabs: false,
      electricChars: true,
      extraKeys: null,
      lineWrapping: false,
      lineNumbers: true,
      firstLineNumber: 1,
      scrollbarStyle: "overlay",
      inputStyle: "contenteditable",
      readOnly: false, // also "nocursor"
      showCursorWhenSelecting: false,
      lineWiseCopyCut: true,
      undoDepth: 200,
      historyEventDelay: 1250,
      autofocus: true
    });
  });
</script>

<div id="main">
  <div class="flex">ABC</div>
  <div class="flex codemirror">
    DEF
    <div id="wrapper">
      <div id="item">
      </div>
    </div>
  </div>
  <div class="flex">GHI</div>
</div>

希望对您有所帮助！

CSS: 使 Flexbox 布局静态化

CSS: Making Flexbox Layout static

html

css

layout

width

flexbox