Wie zu Strecken, Kinder zu füllen Kreuz-Achse?

Ich habe eine Links-rechts-flexbox:

CSS:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

HTML:

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Das problem ist, dass das Rechte Kind nicht verhält sich dementsprechend. Um genau zu sein, ich will es füllen, die Höhe des wrapper.

Wie dies zu erreichen?

  • es füllt die Höhe des wrapper! ich habe es getestet in Chrome und Firefox, und es war kein problem. haben Sie vielleicht vereinfacht Ihren code zu viel. Sie können dies testen, indem Sie die Einstellung background-color für Kinder oder Einstellung align-items: center im wrapper.
  • ja, die Höhe des wrapper nicht ausgefüllt ist safari für einige Gründe... chrome und firefox tut dies sehr schön durch die Einstellung der Höhe: '100%' in der Kinder
InformationsquelleAutor Deborah Cole | 2015-04-06
  1. 136

    • Den Kindern eine Zeile-flexbox-container automatisch füllen Sie den Behälter der vertikale Raum.

    • Angeben flex: 1; für ein Kind, wenn Sie es wollen, füllen Sie die restlichen horizontalen Platz:

    CSS:

    .wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

    HTML:

    <div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

    • Angeben flex: 1; für beide Kinder, wenn Sie wollen, dass Sie füllen Sie die gleiche Menge an horizontalen Raum:

    CSS:

    .wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

    HTML:

    <div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

    InformationsquelleAutor Alex Shesterov
Schreibe einen Kommentar