web-dev-qa-db-ja.com

flexbox

CSSのflexboxでアイテムを垂直方向に中央に配置しようとしています。そして、私は、ベンダープレフィックスなしのコードでそれを行う方法を知っていますが、ベンダープレフィックスを使用しても、Webkit（Chrome）で動作させることはできません。

#triggerでスパンを垂直に揃えようとしています。

これが私のCSSです：

#trigger{
    /* 2009 syntax */
    display: -webkit-box;
    display: box;
    /* current syntax */
    display: -webkit-flex;
    display: flex;
}

#trigger span{
    /* 2009 syntax */
    -webkit-box-align: center;
    /* current syntax */
    -webkit-align-items: center;
    flex-align: center;
}

私が間違っていることは何ですか？

そして、私が使用している他のベンダープレフィックス/プロパティのバージョンがわかっている場合は、それらを共有して、これが単なるWebkit以外で機能するようにしてください。

csscss3flexbox
24
IMUXIxD

align-itemsプロパティは、flex container（display: flexが適用された要素）用であり、フレックスアイテム（フレックスコンテナの子）古い2009仕様には、align-itemsに匹敵するプロパティがありません。 2009年のbox-alignプロパティは、標準仕様のalign-contentまで一致します。

http://jsfiddle.net/mnM5j/2/

#trigger {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  height: 10em;
  background: yellow;
}

<div id="trigger">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
</div>
41
cimmanon

次のプロパティを使用して、垂直方向に配置されたレイアウトを実現できます。これは古い構文を使用していることに注意してください。ただし、Chrome、Firefox、Firefox Auroraの最新ビルドでテストしました-

#trigger {
  width: 200px;
  height: 200px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

#trigger span {
  display: block;
}

box-orientは、ボックスの子の整列方法を指定します。この場合、これは垂直です。

box-packは、ボックスの方向軸に沿って子を整列します。

box-alignは、ボックス内の子を整列します。軸はボックスの方向軸に垂直です。つまり、この場合、ボックスの方向は垂直なので、子の整列を水平に決定します。

Codepenデモンストレーション があります。display: block以外のspan要素に適用したプロパティは、純粋に外観上の目的のためです。

9
Vishu