Flexbox: wyśrodkuj poziomo i pionowo

Question

Flexbox: wyśrodkuj poziomo i pionowo

Jak wyśrodkować div poziomo i pionowo wewnątrz kontenera za pomocą flexbox. W poniższym przykładzie chcę każdą liczbę pod sobą (w rzędach), które są wyśrodkowane poziomo.

.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

391

html css html5 css3 flexbox

Author: Michael_B, 0000-00-00

Source

1 answers

score 470 · Accepted Answer

Myślę, że chcesz coś takiego jak poniżej.

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>

Zobacz demo na: http://jsfiddle.net/audetwebdesign/tFscL/

Twoje .flex-item elementy powinny być na poziomie bloku (div zamiast span), Jeśli chcesz, aby wysokość i górna/dolna wyściółka działały prawidłowo.

Również na .row ustaw szerokość na auto zamiast 100%.

Twoje właściwości są w porządku.

Jeśli chcesz, aby .row było wyśrodkowane pionowo w widok portu, przypisanie 100% wysokości do html i body, a także zerowanie marginesów body.

Zauważ, że .flex-container potrzebuje wysokości, aby zobaczyć efekt wyrównania w pionie, w przeciwnym razie kontener oblicza minimalną wysokość potrzebną do zamknięcia zawartości, która jest mniejsza niż wysokość portu widoku w tym przykładzie.

Przypis:
Na flex-flow, flex-direction, flex-wrap właściwości mogły ułatwić wdrożenie tego projektu. Myślę, że kontener .row nie jest potrzebny, chyba że chcesz dodać trochę stylizacji wokół elementów (obraz tła, obramowania i tak dalej).

Użytecznym zasobem jest: http://demo.agektmr.com/flexbox/