例

by Akihiko Kusanagi

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/ja/docs/Web/CSS/flex -->

<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

CSS

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: 1;
}

#flex-container > .raw-item {
  width: 5rem;
}
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container > .raw-item {
  border: 1px solid #000;
}

JavaScript

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});