Help us understand the problem. What is going on with this article?

AngularのFlex-Layoutについて(Flexboxやレスポンシブ対応)

いつの間にかスター数が増えてきたangular/Flex-Layoutの仕様についてまとめてみようと思います。

Angularで画面を作成する際、レイアウトやレスポンシブ対応を実装するとき役に立ちます

  • CSSのFlexboxをcssを書かなくて簡単に実装できる
  • レスポンシブ対応で非表示やクラス付与など

インポート

# npm
npm i -s @angular/flex-layout @angular/cdk
# yarn
yarn add @angular/flex-layout @angular/cdk

各種コンポーネントで使えるようにするためにモジュールにFlexLayoutModuleを登録する

app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';
...

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

使用方法(レイアウト:Flexbox)

sample.html
<div fxLayout="row"> #fxlayout:boxの方向を決める
   <div fxFlex="10%"></div> #fxflex:上記で決めたboxの幅or高さを決める
   <div fxFlex="10%"></div>
   <div fxFlex="80%"></div>
</div>

親要素

fxLayout=""について

この設定値により子要素の配置方向を決める。

CSS 意味
''(default) flex-direction: row 左から右に配置
row flex-direction: row 左から右に配置
row-reverse flex-direction: row-reverse 右から左に配置
column flex-direction: column 上から下に配置
column-reverse flex-direction: column-reverse 下から上に配置

fxLayoutAlign=""について

CSS 意味
''(default) justify-content: flex-start flex-directionで指定した方向の始めから配置
start or flex-start justify-content: flex-start flex-directionで指定した方向の始めから配置
center justify-content: center 中央に揃え
end or flex-end justify-content: flex-end flex-directionで指定した方向の終わりから配置
space-around justify-content: space-around 全てのFlexboxアイテムの左右に等しく配置
space-between justify-content: space-between 隣り合うFlexboxアイテムの間隔を等しく配置
space-evenly justify-content: space-evenly Flexboxアイテムの間隔を等しく配置

子要素

fxFlex=""について

<div fxFlex="<basis>"></div>
or
<div fxFlex="<grow> <shrink> <basis>"></div>

fxFlexにboxの詳細情報を記載。値が一つの場合、下記のcssのFlexboxのflex-basisを設定したのと同意

/* 幅を指定 */
flex-basis: 10px;
flex-basis: auto;

/* 固有のサイズ指定キーワード */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* フレックスアイテムの内容物に基づいて自動設定する */
flex-basis: content;

/* グローバル値 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

<grow> <shrink> <basis>を設定した場合、
cssのflex-grow、flex-shrink、flex-basisを設定したのと同意である。
この3つは一緒に使用し、通常、すべての値が設定されることを保証するために一括指定される。

  • flex-grow、flex-shrinkはスペースが余っている場合に、指定にしたがって分配するために使用する。
  • flex-growは flex コンテナ内の他の flex アイテムと比較して、どのくらい大きくするか定義する。
  • flex-shrinkは flex コンテナ内の他の flex アイテムと比較して、どのくらい小さくするか定義する。
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away