Ausrichten von Elementen Links und in der Mitte mit flexbox

Ich bin mit flexbox zu richten, mein Kind-Elemente. Was ich tun möchte-center ein element und lassen Sie die anderen ausgerichtet, um den sehr linken. Normalerweise würde ich nur die Links-element mit margin-right: auto. Das problem ist, dass schiebt das center-element aus der Mitte. Ist das möglich ohne mit absoluter Positionierung?

HTML & CSS

CSS:

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

HTML:

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

Besuchen Sie diese Website verweisen, um flexbox: css-tricks.com/snippets/css/a-guide-to-flexbox
Ich konnte nichts sehen dort, dass an meinem Problem.
Ich habe dieses link als Referenz für die meisten genaue und Gründliche Beschreibung von flexbox. Wenn Sie nicht finden können, eine Antwort gibt, dann kann es nicht möglich sein. Eine Sache, die Sie ausprobieren können, ohne absolute Positionierung ist die Verwendung von zwei Behältern. Man wird ausrichten, die erste Schaltfläche auf der linken Seite, die zweite wird sich ausrichten an der Mitte. Drücken Sie dann die zweite mit negativem top-margin.
Ja, es ist möglich ohne absolute Positionierung. Erstellen Sie ein drittes element in den HTML-Code (#right). Machen es identisch mit #left, außer am anderen Ende des Containers. Wenden Sie den folgenden CSS #right: visibility: hidden und margin-left: auto. Jetzt die margin-right: auto auf #left funktioniert wie gewünscht. Mehr Informationen finden Sie hier: stackoverflow.com/q/35250367/3597276

InformationsquelleAutor Carl Edwards | 2015-02-24

19

EDIT: Sehen Solo ' s Antwort unten, es ist die bessere Lösung.

Die Idee hinter flexbox ist ein framework zur einfachen ausrichten von Elementen mit Variablen Dimensionen in einem container. Als solche, es macht wenig Sinn, um eine Anordnung, wobei die Breite eines Elements wird Total ignoriert. Im wesentlichen, das ist genau das, was die absolute Positionierung ist für, wie es dauert, das element aus dem normalen Fluss.

Soweit ich weiß, gibt es keine schöne Möglichkeit, dies zu tun, ohne mit position: absolute;, so würde ich vorschlagen, es zu benutzen... aber Wenn Sie WIRKLICH nicht wollen, oder nicht verwenden können, die absolute Positionierung, dann nehme ich an, Sie könnte verwenden Sie eine der folgenden Problemumgehungen.

Wenn Sie wissen, die genaue Breite von der "Linken" div, dann könnte man ändern justify-content zu flex-start (Links) und richten Sie dann die "Center" div wie diese:
```
#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}
```
Wenn Sie nicht wissen, die Breite, dann könnte man die doppelten "Links" auf der rechten Seite, verwenden Sie justify-content: space-between; ausblenden und die neue Rechte element:
Nur klar zu sein, das ist wirklich, wirklich hässlich... besser absolute Positionierung als duplicate content. 🙂

CSS:
```
#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 500px;
}
#right {
    opacity: 0;
}
```
HTML:
```
<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Left</span>
</div>
```
- Ich kann nicht Zustimmen, dass die zweite Methode ist "hässlicher". Es ist wirklich besser als die erste, da Flexbox Kinder nicht überlappen, wenn es nicht genug, dass der horizontale Abstand.
InformationsquelleAutor pschueller
46

Hinzufügen Dritte leeres element:
```
<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>
```
Und die folgenden Stil:
```
.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}
```
Nur nach Links und rechts eingestellt sind, um zu wachsen und Dank der Tatsachen, dass...
- es gibt nur zwei wachsenden Elemente (egal ob leer) und
- dass beide erhalten die gleiche Breite (Sie werden gleichmäßig zu verteilen, den verfügbaren Platz)
...- center-element wird immer perfekt zentriert.

Dies ist viel besser als akzeptierte Antwort meiner Meinung nach, weil Sie nicht haben, um Kopie Links die Inhalte nach rechts und verstecken es, um gleiche Breite für beide Seiten es einfach magisch passiert (flexbox ist magisch).

In Aktion:

CSS:
```
.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}
```
HTML:
```
<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>
```
- Vielen Dank, das ist genau das, was ich brauchte, um ein modales Fenster ist die Titelleiste.
- Sie können auch ein pseudo-element des parent-statt eines leeren Elements, z.B. .parent::after{content: ''; flex: 1}
- Dies ist der sauberste Weg! Danke.
- Wie kann ich diese Methode verwenden, um das Gegenteil zu tun? I. e. Center ein Element, und setzen Sie einen weiteren Punkt auf der rechten Seite?
- Setzen Sie einfach Ihren content div mit der Klasse right verlassen und div mit der Klasse left leer.
- Vielen Dank für Ihre Antwort. Wenn ich das mache, 'rechts' bewegt sich in die Mitte und klebt rechts neben dem center-Element.
- Nichts bewegt sich, überall ist der Inhalt Links ausgerichtet und es scheint, wie es der "Bewegung zur Mitte", wie folgt. Hinzufügen text-align: right; Klasse .right.
- Danke @Solo, das hat geklappt.
InformationsquelleAutor Solo

Versuchen, diese keine hacks 🙂

CSS

.container{
  width: 500px;
  margin: 0 auto;
}
.box{
  display: flex;
  align-items: center;/* just in case*/
  justify-content: space-between;
}
.box p:nth-child(2){
  text-align: center;
  background-color: lime;
  flex: 1 1 0px;
}

HTML

<div class="container">
  <div class="box">
    <p>One</p>
    <p>Two</p>
  </div>
</div>

http://codepen.io/whisher/pen/XpGaEZ

Dies nur Zentren in den übrigen Raum. Es ist nicht wahr center

InformationsquelleAutor Whisher

Habe ich eine andere Lösung. Meiner Meinung nach, fügen Sie einen leeren block an das center-element ist gut, aber code-Weise bisschen hässlich. Meine Lösung für dieses ist unten

    <div id="parent">
      <span id="left">Left</span>
      <span id="center">Center</span>
    </div>

   #parent {
      display: flex;    
   }

   #left {
      flex:1;
   } 

   #center {
      flex:1;
   } 

   #parent:after {
      flex:1;
   }

InformationsquelleAutor Thiwanka Dodanwela

0

Wenn Sie nicht wollen, verlassen sich auf die Positionierung, die einzige Möglichkeit, die ich gefunden habe, dass es wirklich mittig ist die Verwendung einer Kombination von auto-margin und negative Marge verhindern, dass das element zentriert zu bekommen, geschoben über von der linken Seite ausgerichtet element. Dies erfordert, dass Sie wissen, die genaue Breite von der linken Seite ausgerichtet element obwohl.

CSS:
```
.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: center;
}

.block {
  width: 120px;
  background: tomato;
}

.justify-start {
  margin-right: auto;
}

.justify-center {
  margin-right: auto;
  margin-left: -120px;
}
```
HTML:
```
<div class="container">
  <div class="block justify-start"></div>
  <div class="block justify-center"></div>
</div>
```
InformationsquelleAutor Martin

-1

Soweit ich weiß, dies ist möglich mit dem folgenden code.

https://jsfiddle.net/u5gonp0a/

CSS:

.box {
    display: flex;
    justify-content: center;
    background-color: green;
    text-align: left;
}

.left {
    padding: 10px;
    background-color: pink;
}

.center {
    padding: 10px;
    background-color: yellow;
    margin: 0 auto;
}

HTML:

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
</div>

InformationsquelleAutor Stuiterbal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

In Aktion: