web-dev-qa-db-ja.com

Bootstrap 4 flexboxを使用して利用可能なコンテンツを埋める方法は？

angularを使用するbootstrapアプリがあります。4。上部に固定されたナビゲーションバーがあり、ブラウザーの残りの領域を埋めるコンテンツを追加したいです。上部のnavbarの他に、ヘッダーとフッターのコンテンツを含むdivがあります。ヘッダーとフッターの間にメインコンテンツセクションがあり、そのセクション（以下の例では#two）ですべての空のスペースを埋めます。

これを実現するためにcss flexboxを使用できると思っていましたが、flexboxの世界に移動したとき、私の簡単な非ブートストラップbootstrapの例は何もしないようです。 これらのドキュメント を使用して、これを理解しようとしました。

align-self-stretchを使用することでこの目標を達成できると考えましたが、含む要素が#outerコンテンツを保持するのに十分な大きさになっているように見えるため、flexboxはありません展開される。ストレッチを取得するために、height:100%スタイルを含むdivに単純に追加しようとしましたが、それは役に立たなかったようです。

これを作成しました plunkerの例 @ZimSystemの応答に基づいています。彼のコード例は、私が望んでいた通りに機能するように見えましたが、単純なangularコードに変更を加えようとしても、フレックスストレッチは起こりませんでした。変換でそれを破るために何をしているのか分かりません。

enter image description here

これは、現在表示しているangularコンポーネント全体です。

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

そして、これがnavbarとインジェクションポイントを示すアプリケーションコンテナーです。

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav"> 
            <li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
        </ul>
    </nav>
    <router-outlet></router-outlet>
</div>

#two divをコンテンツヘッダーの上部と下部に固定されたコンテンツヘッダーおよびフッターとして機能しながら、#oneおよび#three divをスペースに合わせて拡張するにはどうすればよいですか。

csstwitter-bootstrapangularflexboxbootstrap-4
40
Chris Farmer

Bootstrap 4.1.0を更新

flex-grow-1およびflex-fillクラスは、Bootstrap 4.1.0に含まれています

Update Bootstrap 4.0.0

次のようなflex-growクラスを追加します。

.flex-grow {
    flex: 1 0 auto;
}

次に、レイアウトの残りの部分に ユーティリティクラス を使用できます。

 <div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link">Item 1</a></li>
        </ul>
    </nav>
    <div id="outer" class="d-flex flex-column flex-grow">
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content 40px height
        </div>
    </div>
</div>

https://www.codeply.com/go/3ZDkRAghG

38
Zim

コンポーネントは<flex>要素にラップされ、同じflexboxスタイリングを使用して垂直方向に伸縮し、コンテンツを伸縮させることができます。したがって、class="d-flex flex-column flex-grow"に<flex>を追加すると機能します。 配管工の例 の作業フォークです。

5
Tigran Petrossian

Angularプランカーで ZimSystemのマークアップ を使用するときの問題は、コンポーネントがレンダリングされたHTMLにflexタグ付きの追加コンテナーとして挿入されることです。

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        ...
    </nav>
    <router-outlet></router-outlet>
    <flex>
        <div id="outer" class="d-flex flex-column flex-grow">
            ...
        </div>
    </flex>
</div>

this modified plunker 。

import {Component, NgModule, HostBinding, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
    selector: 'flex',
    template: `
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content
        </div>
    `
})
export class FlexComponent {
    @HostBinding('class') classes = 'd-flex flex-column flex-grow';  
    ...
}
3
ConnorsFan

使用しているクラスの動作を制御できない場合。すべてを削除して、このCSSのみを使用してください。

html,
body,
flex {
  height: 100%;
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.two {
  background-color: #123;
  flex-grow: 1;
  color: #FFF;
}
<flex>
  <div class="outer">
    <div class="one">
      Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br>
    </div>
    <div class="two">
      Hey. This is body
    </div>
    <div class="three">
      Hey. This is footer <br> Hey. This is footer <br>
    </div>
  </div>
</flex>
2
Duannx
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex-grow {
  flex: 1;
}

コンテンツブロックを保持するラッパーコンポーネントを追加し、flex-growクラスを残りのスペースを埋めたいものに適用します。

1
Sara

コンポーネントを成長させてそのコンテナを埋め、それをフレックス列としても使用して、コンテンツも成長させることができます。これを行うには、:Hostを使用してコンポーネント要素をターゲットにします。

flex.component.ts

  @Component({
    selector: 'flex',
    template: `

  <div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
      header content
      <br> another line
      <br> And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
      main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
      footer content
    </div>
  </div>        

    `,
    styles: [':Host {flex: 1 0 auto; display: flex; flex-direction: column }']
  })

plunk を更新しました。

0
JayChase

CSS

html, body {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

flex.components.ts

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'flex',
  Host: {'class': 'flex-grow'},
  template: `

<div id="outer" class="d-flex flex-column h-100 flex-grow">
  <div id="one" class="">
    header content
    <br> another line
    <br> And another
  </div>
  <div id="two" class="bg-info flex-grow">
    main content that I want to expand to cover remaining available height
  </div>
  <div id="three" class="">
    footer content
  </div>
</div>        

  ` 
})
export class FlexComponent {
  constructor() {}
}

結果- https://plnkr.co/edit/vQS7Jw58zmlVshz9YmQ8?p=preview ありがとう:)

0
grinmax