web-dev-qa-db-ja.com

Flexbox列は自分自身を下に揃えます

Flexboxを使用しようとしています。 http://css-tricks.com/almanac/properties/a/align-content/ これは、ナイスアライメントオプションを示しています。しかし、私は実際にトップトップボトムの状況が欲しいでしょう。

Flexboxを使用して、divを親divの下部に貼り付けます。 flex-direction: columnおよびalign-content: Space-between私はこれを行うことができますが、中央のdivは中央に配置され、中央のdivも上部に貼り付けられます。

[上]

[中間]

-

-

-

[底]

align-self: flex-endは、下ではなく右に浮かせます。

complete flexbox docs： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

csscss3flexbox
49
Laurens Kling

基本的に、答えは、次のように中間要素の最後にflex grow 1コードを与えることです。

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

ありがとう、T04435。

31
T04435

私はパーティーに少し遅れていますが、あなたができるはずの同じことを達成しようとしている他の人に関係があるかもしれません：

margin-top: auto

問題の要素で、それは下に行く必要があります。 firefox、chromeおよびsafari。

103
Torbjørn Angeltveit

私は自分の解決策を見つけました。ドキュメントの価値のためにここに追加します。

真ん中のブロックheight: 100%を与えると、真ん中の部屋を占有します。したがって、一番下のブロックは実際の一番下にあり、一番上と真ん中が上になります。

更新：これはChromeでは機能しません...

更新：FF/Chromeで機能する方法を見つけました。[middle]にflex-growをより大きな数値（1で十分）に設定すると、フルミドルサイズになります。詳細： http://css-tricks.com/almanac/properties/f/flex-grow/

12
Laurens Kling

align selfプロパティは、主軸ではなく、交差軸に関するアイテムの配置に依存します。したがって、これは進むべき道ではありません。ただし、flexboxを使用してそれを実現するためのいくつかのオプションがあります。

1）中間アイテムでflex-grow：1を使用します。これにより、コンテナ内の残りのスペースをすべて使用して成長し、最後のdivが下に移動します。

2）justify-content:space-betweenを持つメインdivが存在するようにレイアウトをリファクタリングして、最後のdivが下に固定されるようにします。

.container{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.body{
    display:flex;
    flex-direction:column;
}
.bottom{
    /* nothing needed for the outer layout */
}

<div class="container">
    <div class="body">
        <div>top content</div>
        <div>middle content</div>
    </div>
    <div class="bottom">
        bottom content
    </div>
</div>

3）これは少し奇妙ですが、align-selfを使用してそれを行うこともできますが、フレックスの方向を逆にしてアイテムをラップできます。

.container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.body{
    display:flex;
    flex-direction:column;
    flex-basis:100%;
}
.bottom{
    align-self:flex-end
}

この無料のflexboxデザイナー： http://algid.com/Flex-Designer を使用して、これをすべてテストしました。

3
Mario Vázquez

私はこれが古い投稿であることを知っていますが、Flexboxの単一軸のアライメントに関する同じ問題により、私は1時間気になりました。

自動マージンは素晴らしいトリックですが、CSS Gridとソリューションを共有したかったのです。

important部分は、grid-template-rowsの定義です。 autoでは、行はコンテンツと同じ高さを持ち、1frは中央の行の残りのスペース。

CSSグリッドの概要： https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 1em;
  justify-content: center;
}

.top {
  height: 2em;
  width: 10em;
  background-color: blue;
}

.middle {
  height: 3em;
  width: 10em;
  background-color: green;
}

.bottom {
  height: 2em;
  width: 10em;
  background-color: red;
}
<div class="container">
  <div class="top">
    <p>TOP</p>
  </div>
  <div class="middle">
    <p>MIDDLE</p>
  </div>
  <div class="bottom">
    <p>BOTTOM</p>
  </div>
</div>
1
Sebe

あなたのウェブサイトは基本的な構造を持っていることを考慮して、ここに私が使用し、同様の状況で適用したソリューションを、ほんの数行のコードで示します：

[〜＃〜] html [〜＃〜]

<div class="site-container">
    <header>your header</header>
    <main>your main with little content</main>
    <footer>your footer</footer>
</div>

[〜＃〜] css [〜＃〜]

.site-container{
    min-height: 100vh;   //not necessary to calculate the height of the footer
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
}
0
Jorge Monte