Warum ist flexbox-Raum-zwischen nicht arbeiten?

Bin ich versucht zu implementieren flexbox, aber kann nicht ankommen es zu wirken. Was bin ich? Ich habe alle flexbox-vendor-Präfixe im Ort.

.main-navigation ul { 
   width:100%; 
   display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
   display: -ms-flexbox;  /* TWEENER - IE 10 */
   display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  }

.main-navigation ul li {
   justify-content:space-between; 
   width:100px; 
   background:#666; 
   display:block;
 }

Das Ziel ist es, in der linken li zu gehen, bündig mit der linken Seite des ul-Containers und rechts li zu gehen bündig mit der rechten Seite der ul-container. Jede Hilfe willkommen.

können Sie erstellen eine demo?
Sind Sie sicher, dass Sie nicht fehlt die vendor-Präfixe für die Raum-zwischen-Regel @alySebastien?

InformationsquelleAutor Al-76 | 2015-10-08

  1. 17

    Das problem ist, sollten Sie justify-content: space-between; auf element mit display: flex Eigenschaft oder besser gesagt auf 'parent', also 'child' Elemente ausgerichtet werden, mit dem Raum zwischen einander.

    .main-navigation ul { 
  width: 100%; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.main-navigation ul li {
  width: 100px; 
  background: #666; 
  display: block;
}
    Danke. Sieht aus wie ich fehlte die vendor-Präfixe für die Raum-zwischen-den-Regel. 🙂

    InformationsquelleAutor Rakhat Jabagin

  2. 9

    Flex-Eigenschaften sind aufgeteilt in zwei Kategorien: Die flex-container und die flex-Elemente.

    Einige Eigenschaften gelten nur für die container, die andere Eigenschaften gelten nur für die Elemente.

    Die rechtfertigen-content Eigenschaft gilt nur für ein flex-container.

    In Ihrem code justify-content angewendet wird, um die Elemente, so dass es keine Wirkung.

    Re-ordnen Sie die container.

    Natürlich, ein element kann sowohl ein flex-container und Element, in welchem Fall alle Eigenschaften gelten. Aber das ist hier nicht der Fall. Die li Elemente sind ausschließlich flex-Elemente und ignoriert die container-Eigenschaften.

    Für eine Liste der "flex-Eigenschaften" – geteilt durch-container und Elemente – siehe: A Complete Guide to Flexbox

    InformationsquelleAutor Michael_B

  3. 5

    Eine weitere Sache im Auge zu behalten, zusätzlich zu der Notwendigkeit, hinzufügen justify-content:space-between auf die flex-container und nicht die Elemente selbst, Stellen Sie sicher, dass Sie nicht leere Elemente (wie eine leere div oder :after) im inneren des Behälters.

    In meinem Fall stellte sich heraus, JS-hinzufügen eines leeren div-als "clearfix" aus der Zeit vor der flex, wenn die Dinge fertig waren, floating elements.

    justify-content:space-between rechtfertigen wird für alle Elemente innerhalb des Containers selbst diejenigen, die keine Inhalte, die kann mess up die Ausrichtung und den Textumbruch.

    InformationsquelleAutor ccrez

Schreibe einen Kommentar