Question

我目前正在尝试学习如何使用display: flexbox，并且正在包含主要内容和使用transform属性隐藏的侧边栏的项目中尝试使用它。

但是，如果边栏被转换隐藏，则主要内容不会在父级中扩展到完整宽度。如何使主要内容全角显示？

.parent {
  background-color: blue;
  display: flex;
}

.child {
  background-color: red;
  flex: 1 1;
}

.hidden-child {
  background-color: green;
  transform: translateX(100px);
  width: 100px;
}

JSFiddle：https://jsfiddle.net/Crotanite/d2vwhnk5/

Answer 1

使用flex-basis强制主要内容采用宽度的100％。
您还可以使用white-space: nowrap防止子项分成多行。

body {
  margin: 0;
  overflow: hidden;
}

.parent {
  background-color: blue;
  display: flex;
  align-items: flex-start;
}

.child {
  background-color: red;
  flex: 1 0 100%; /* here */
}

.hidden-child {
  background-color: green;
  transform: translateX(100px);
  width: 100px;
  white-space: nowrap; /* and here */
}

<div class="parent">
  <div class="child">
    child
  </div>
  <div class="hidden-child">
    hidden child
  </div>
</div>

当一个元素用tranform隐藏时，如何使flex child展开？

1 个答案: