Flexbox, responsive raster von quadratischen divs gleichbleibendem Seitenverhältnis

Ich versuche zu erstellen, die eine 2x2-raster mit divs. Einige der divs könnte ein Bild enthalten, aber es wird wahrscheinlich eingestellt werden, als hintergrund, mit der option background-size: cover.

Hier ist die pen habe ich: http://codepen.io/qarlo/pen/vLEprq

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  max-width: 960px;
  width: 80%;
}
.container__item {
  align-content: center;
  border: 1px solid #333;
  display: flex;
  flex-basis: 1;
  font-size: 3em;
  justify-content: center;
  height: 100%;
  margin-bottom: 1em;
  min-height: 300px;
  width: 47%;
}

HTML:

<div class="container">
  <div class="container__item">?</div>
  <div class="container__item">?</div>
  <div class="container__item">?</div>
  <div class="container__item">?</div>
</div>

Ich möchte die Kraft, die divs werden Plätze und behalten Sie das Seitenverhältnis bei der Größenänderung. Ich war irrtümlich in der Hoffnung, dass dieser gewesen wäre, einfach mit flexbox, aber es sei denn, ich bin fehlt etwas, ich war falsch.

danke, aber es funktioniert nicht auf Firefox und es scheint zu funktionieren, in Chrome, verliere ich die Ausrichtung des Inhalts

InformationsquelleAutor Carlo | 2015-12-08

12

Pflegen Ihre Artikel-Aspekt-Verhältnis, eine sehr einfache Methode ist die Verwendung CSS Viewport-Einheiten

Modifizierte ich den Stift um zu sehen, wie diese Geräte arbeiten: http://codepen.io/vladbicu/pen/wMBmOb
```
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
    max-width: 960px;
    width: 80%;
}

.container__item {
    align-content: center;
    border: 1px solid #333;
    display: flex;
    flex-basis: 1;
    font-size: 3em;
    justify-content: center;
    margin-bottom: 1em;

    //maintain aspect ratio
    width: 30vw;
    height: 30vw;
}
```
Hoffe, es hilft.
- Das ist sehr schön, aber auf diese Weise scheint es, dass align-content: center nicht mehr funktioniert, tut es das?
- Wenn Sie wollen, um die vertikale Ausrichtung der Inhalte, verwenden Sie align-items: center container__posten div. Prüfen Sie das blog post zu sehen, der Unterschied zwischen align-content-und align-items.
- Ich wusste eigentlich der Unterschied, aber ich war mit dem anderen verwechseln können. Gut, das ist toll und ich denke, dass ist die beste Lösung. Danke
- Flex-basis nicht 1 sein. Überprüfen Sie die Dokumentation developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
InformationsquelleAutor Vlad Bîcu

Verwenden Sie die alt "padding-bottom" trick für festes Seitenverhältnis. Extra-divs sind reqiured obwohl:

CSS:

.container {
  margin: auto;
  width: 80%;
  max-width: 960px;
}
.container__square {
  float: left;
  position: relative;
  padding-bottom: 50%;
  width: 50%;
  background: linear-gradient(45deg, #CCC, #000, #CCC);
}
.container__square__item {
  position: absolute;
  top: 1em;
  bottom: 1em;
  left: 1em;
  right: 1em;
  border: 1px solid #333;
  background: #FFF;
}
/* clearfix */
.container::after {
  content: "";
  display: block;
  clear: both;
}

HTML:

<div class="container">
  <div class="container__square">
    <div class="container__square__item">?</div>
  </div>
  <div class="container__square">
    <div class="container__square__item">?</div>
  </div>
  <div class="container__square">
    <div class="container__square__item">?</div>
  </div>
  <div class="container__square">
    <div class="container__square__item">?</div>
  </div>
</div>

das funktioniert, ist eine schöne Lösung, aber es ist nicht mit flexbox. also ich denke flexbox-Eigenschaften sind einfach nicht genug (noch?) um dieses problem zu lösen
es gibt keine flexbox-Lösung in meinem wissen. Noch können Sie flexbox für .container und .container__square statt schwimmt. Ich verwendet schwimmt, weil seine alte Schule, ähnlich wie die Polsterung trick.

InformationsquelleAutor Salman A

Denke, man müsste um mindestens die min-height zu pflegen, der Aspekt ration auf die Größe, wenn Sie möchten, gehen Sie mit einem flex-box-layout.

Hier ist eine quick-and-dirty-Beispiel.

JS:

function setCellsMinHeight (parentSelector, cellsMargin, aspect) {
  var winWidth = window.innerWidth,
      containerList = document.querySelectorAll(parentSelector),
      containerArray = Array.prototype.slice.call(containerList),
      childMargin = cellsMargin;

  containerArray.forEach(function(elem) {
    var containerWidth = elem.offsetWidth,
        childCount = elem.children.length,
        childWidth = (containerWidth - ((childMargin * 2) * childCount)) / childCount,
        childMinHeight = (childWidth / 100) * aspect;
    for (i = 0; i < childCount; i++) {
      elem.children[i].style.margin = childMargin + "px";
      elem.children[i].style.minHeight = childMinHeight + "px";
    }
  });
}

window.onresize = function(event) {
  setCellsMinHeight('.container', 4, 100);
};

setCellsMinHeight('.container', 4, 100);

CSS:

body {
  margin: 0;
}
.container {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  max-width: 100%;
  margin: 0 auto;
}

.content-cell {
  flex: 1;
  background-color: #ccc;
}

@media (min-width: 801px) {
  .container {
    max-width: 800px;
  }
}

HTML:

<div class="container">
  <div class="content-cell"></div>
  <div class="content-cell"></div>
</div>

<div class="container">
  <div class="content-cell"></div>
  <div class="content-cell"></div>
</div>

Hoffe, es hilft.

vielen Dank für das script, es scheint zu funktionieren, aber nochmal: der Hauptgrund, warum ich wollte, um zu implementieren eine flexbox-Lösung wurde zu vermeiden knifflige workarounds und verlassen sich nur auf flexbox, aber es scheint, es ist noch nicht möglich

InformationsquelleAutor DavidDomain

-1

Als ich verstehen, ich denke, Sie wollen flexible Boxen die ganze Zeit, so dass Sie können diese Aktion durchführen, durch die Verwendung von JavaScript.
1. Die Höchste Höhe des Inhalts
2. weisen, dass die höchste Breite und Höhe für die ganze Klassen
und das ist, wie Sie pflegen können flexible Boxen

oder Sie können externe Bibliothek
1. Css-tricks
2. JQuery Flexbox
- Einstellung der höchsten Höhe des Inhalts aller Elemente würde das nicht machen reaktionsschnell Weg, obwohl. Auch aus meinem Beispiel können Sie sehen, dass der Inhalt auch nur ein Charakter. Die css tricks Artikel ist nur ein tutorial auf flexbox, ist es nicht?
- Ja, das ist, was Sie wollen rechts responsive grid mit gleichen und Quadrat der Höhe
- Aber es ist nicht genug, nur die höchste Höhe, denn es würde nicht passen sich automatisch an die Größe.
InformationsquelleAutor Om Komawar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.