BinaryDevelop
  1. ホーム
  2. html

[解決済み] Flexbox：水平方向と垂直方向の中央揃え

2022-03-23 12:18:36

質問

フレックスボックスを使用して、divを水平方向と垂直方向にコンテナ内で中央化する方法。以下の例では、各番号を下（列）にして、水平方向に中央揃えしたい。 

.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

解決方法は？

以下のようなものがいいのではないでしょうか。 

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    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>

でデモをご覧ください。 http://jsfiddle.net/audetwebdesign/tFscL/

あなたの .flex-item 要素はブロックレベルでなければなりません ( div ではなく span ) で、高さと上下のパディングを正しく動作させたい場合。

また .row に、幅を設定します。 auto ではなく 100% .

あなたの .flex-container プロパティは問題ありません。

もし .row をビューポートの垂直方向の中央に配置するには、高さを100%にして html と body をゼロにし、さらに body の余白になります。

なお .flex-container さもなければ、コンテナはコンテンツを囲むのに必要な最小の高さを計算し、この例ではビューポートの高さよりも低くなります。

脚注です。
その flex-flow , flex-direction , flex-wrap プロパティがあれば、このデザインはより簡単に実装できたはずです。私は .row コンテナは、要素の周りに何らかのスタイル（背景画像、ボーダーなど）を追加するのでなければ、必要ありません。

便利な資料があります。 http://demo.agektmr.com/flexbox/

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します