2

SINGLE 子要素を許可する flexbox div があります。これまでのところ、垂直方向のストレッチを含め、子の位置合わせ (上、左、右、下など) を適切に行うことができました。また、垂直方向と同時に水平方向のストレッチをサポートできるようにしたいと考えています (「同時に」が鍵のようです)。

子要素の 'flex' プロパティを '1 100%' に設定することで水平方向のストレッチを実現できましたが、これは親要素に適用されたパディングを無視するように見えます (およびそのために子ノードに適用されたマージンは無視されます)。案件）。

フレックスボックスの仕様を見ると、フレックスボックスの主軸に沿ってこれを行う他の方法を見つけることができません。横軸ストレッチも問題ありません。

4

2 に答える 2

2

可能です。そして、ここにその方法を示す小さなサンプルがあります：

.centerbox {
  /* basic styling */
  width: 350px;
  height: 95px;
  font-size: 14px;
  border: 1px solid #555;
  background: #CFC;
  /* flexbox, por favor */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <style>
    .centerbox {
      /* basic styling */
      width: 350px;
      height: 95px;
      font-size: 14px;
      border: 1px solid #555;
      background: #CFC;
      /* flexbox, por favor */
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      display: -moz-box;
      -moz-box-orient: horizontal;
      -moz-box-pack: center;
      -moz-box-align: center;
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
    }
  </style>
</head>

<body>
  <div class="centerbox">
    <textarea>resize me, please</textarea>
  </div>
</body>

</html>

参考までに：Axel Russellは、マルチブラウザサポート用のクラスを作成する上で素晴らしい仕事をしました：http：//infrequently.org/2009/08/css-3-progress/

于 2012-04-30T18:56:55.333 に答える
0

あなたは解決策を見つけましたが、次のスニペットは、一般的な解決策を探していたすべての開発者 (私自身など) にとって便利だと思います。 http://jsfiddle.net/EL2KL/1/ ソリューションのフィドルを公開していただければ幸いです。

ps Jiri (フレックス マスター) に感謝

于 2012-07-25T08:47:12.257 に答える