html - CSS:使 Flexbox 布局静态化

Question

我正在尝试将一些内容放入 flex 布局行中，我注意到了这一点

• 行的宽度随他的内容调整

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

CodeMirror 编辑器只是用来说明在该行中有更大和/或更小的 child 的问题。

看看这个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(在我的例子中，它的类是 .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>

希望这对您有所帮助!