15

ちょっと私はこのように見えるギャラリーのレスポンシブボックスレイアウトを作成しようとしていますhttp://webdesignerwall.com/demo/responsive-column-grid/

この例の問題点は、幅がハードコーディングされており、メディア クエリが必要なことです。それが実現可能な解決策であるために、私は多くの列に道を持っています。

Flex グリッドでも同じ結果を得ることができますが、この CodePen に示されているように、最後の列が他の列よりも大きくなっています。

http://codepen.io/anon/pen/zClcx

HTML

<div class="flex-container same-width same-height">
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>why am I longer than my friends?</div>
  </div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    max-width: 950px;
    flex-wrap: wrap;
    justify-content: space-between;
    background: grey;

  & > * {
    min-width: 300px;
    background: green;
    max-width: 404px;
    flex: 1 1 auto;
  }
  .flex-item > div {
    background: red;
  }
}

質問: 最後の列を他の列と同じサイズにするにはどうすればよいですか?

4

4 に答える 4

4

max-フレックス ボックスを使用する場合は、min-幅に注意する必要があります。w3schoolsからの引用:

ヒント: 柔軟な要素は、ボックスの縮小と拡大に合わせて縮小または拡大できます。ボックスに余分なスペースがある場合は常に、柔軟な要素が拡張されてそのスペースを埋めます。

これに対抗するには、コンテナーの幅を X ピクセル数に設定しますが、内部ボックスにはピクセル量ではなくパーセンテージを使用します。コンテナーのパーセンテージは、すべての列で同じになります。

これを行うと、垂直方向ではなく水平方向にボックスを拡張する (それぞれのコンテンツに基づいて幅を広げる) 場合にのみ、フレックス ボックスが必要になるため、フレックス ボックスの必要もなくなります。

PS - これをレスポンシブにし、幅をその間のスペースに比例させたい場合は、マージンにもパーセンテージを使用します (ただし、ボーダーとパディングのサイズに注意してください)。これは必須ではありませんが、さまざまなデバイスで一貫したルック アンド フィールを維持するための便利な機能です。

于 2013-10-28T01:09:18.557 に答える