spalten - html div flexbox




Flexbox: zentriert horizontal und vertikal (6)

So zentrieren Sie div horizontal und vertikal innerhalb des Containers mithilfe von flexbox. Im folgenden Beispiel möchte ich jede Nummer untereinander (in Zeilen), die horizontal zentriert sind.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

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


So zentrieren Sie Elemente vertikal und horizontal in Flexbox

Im Folgenden finden Sie zwei allgemeine Zentrierungslösungen.

Eine für vertikal ausgerichtete Flex-Elemente ( flex-direction: column ) und die andere für horizontal ausgerichtete Flex-Elemente ( flex-direction: row ).

In beiden Fällen kann die Höhe der zentrierten divs variabel sein, undefiniert, unbekannt, was auch immer. Die Höhe der zentrierten divs spielt keine Rolle.

Hier ist der HTML-Code für beide:

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (ohne dekorative Stile)

Wenn Flex-Elemente vertikal gestapelt werden:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

DEMO

Wenn Flex-Elemente horizontal gestapelt werden:

Passen Sie die flex-direction Regel aus dem obigen Code an.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

DEMO

Zentrieren des Inhalts der Flex-Elemente

Der Bereich eines Flex-Formatierungskontexts ist auf eine Parent-Child-Beziehung beschränkt. Nachkommen eines Flex-Containers außerhalb der Kinder nehmen nicht am Flex-Layout teil und ignorieren Flex-Eigenschaften. Im Wesentlichen sind Flex-Eigenschaften nicht über die Kinder vererbbar.

Daher müssen Sie immer display: flex oder display: inline-flex auf ein Elternelement anwenden, um Flex-Eigenschaften auf das Kind anzuwenden.

Um Text oder anderen Inhalt, der in einem Flex-Element enthalten ist, vertikal und / oder horizontal zu zentrieren, machen Sie den Gegenstand zu einem (verschachtelten) Flex-Container und wiederholen Sie die Zentrierungsregeln.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Weitere Details finden Sie hier: Wie richtet man Text in einer Flexbox vertikal aus?

Alternativ können Sie margin: auto auf das Inhaltselement des Flex-Elements anwenden.

p { margin: auto; }

Hier erfahren Sie mehr über Flex- auto Margen: Methoden zum Ausrichten von Flex-Elementen (siehe Box # 56).

Zentrieren mehrerer Linien von Flex-Elementen

Wenn ein Flex-Container mehrere Zeilen enthält (aufgrund der Umbruchfunktion), ist die Eigenschaft align-content für die Ausrichtung der Achsen quer zur Achse erforderlich.

Aus der Spezifikation:

8.4. Packing Flex Lines: Die Eigenschaft align-content

Die Eigenschaft align-content richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn in der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie bei justify-content einzelnen Elemente auf der Hauptachse ausgerichtet werden. Beachten Sie, dass diese Eigenschaft keinen Einfluss auf einen flexiblen Flex-Container hat.

Mehr Details hier: Wie funktioniert Flex-Wrap mit align-self, align-items und align-content?

Browserunterstützung

Flexbox wird von allen gängigen Browsern unterstützt, außer IE <10 . Einige aktuelle Browser-Versionen, wie Safari 8 und IE10, benötigen Hersteller-Präfixe . Um schnell Präfixe hinzuzufügen, verwenden Sie Autoprefixer . Weitere Details in dieser Antwort .

Zentrierungslösung für ältere Browser

Eine alternative Lösung zum Zentrieren mit CSS-Tabellen und Positionierungseigenschaften finden Sie in dieser Antwort: https://.com/a/31977476/3597276


Wenn Sie einen Text in einem Link zentrieren müssen, ist das der Trick:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>


Hinzufügen

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

zu dem Containerelement von was auch immer Sie zentrieren möchten. Dokumentation: justify-content und align-items .


Ich denke du willst so etwas wie das Folgende.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Siehe Demo unter: http://jsfiddle.net/audetwebdesign/tFscL/

Ihre .flex-item Elemente sollten auf Blockebene ( div statt span ) sein, wenn Sie möchten, dass die Höhe und die obere / untere Füllung richtig funktionieren.

.row die Breite bei .row auf auto statt auf 100% .

Ihre .flex-container Eigenschaften sind in Ordnung.

Wenn Sie möchten, dass .row im .row vertikal zentriert wird, weisen Sie html und body Höhe von 100% zu und setzen Sie die .row ebenfalls auf Null.

Beachten Sie, dass .flex-container eine Höhe benötigt, um den vertikalen Ausrichtungseffekt zu sehen. Andernfalls berechnet der Container die Mindesthöhe, die zum Umschließen des Inhalts erforderlich ist. Diese Höhe ist in diesem Beispiel geringer als die Höhe des Ansichtsfensters.

Fußnote:
Die flex-flow , flex-direction und flex-wrap Eigenschaften hätten die Implementierung dieses Designs erleichtern können. Ich denke, dass der .row Container nicht benötigt wird, es sei denn, Sie möchten etwas Styling um die Elemente (Hintergrundbild, Rahmen usw.) hinzufügen.

Eine nützliche Ressource ist: http://demo.agektmr.com/flexbox/


Verwenden von CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Schau mal HERE


margin: auto funktioniert perfekt mit flexbox. Es zentralisiert sich vertikal und horizontal.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>





flexbox