4

フレックスボックス上に構築されたレイアウトを使用して、Angular Material Design を使用して Web アプリケーションのレイアウトを設計したいと考えています。

codepen で、私が望むレイアウトを作成しようとしましたが、思い通りに表示されません。

   <html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.css">
  </head>
  <body layout="column" ng-controller="AppCtrl">
    <div flex layout="row" layout-align="center center" style="border: 1px solid #FF00FF; height: 30px; position: fixed;">
      <h1>Please make me fixed</h1>
    </div>
    <div flex layout="row" layout-align="center center" style="border: 1px solid #FF00FF; height:30px; position: fixed;">
       <h1>Please make me fixed</h1>
    </div>
    <div layout="row" flex>

    </div>
    <!-- Angular Material Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
  </body>
</html>
  1. 異なる色の 2 つのバルクで構成される固定ナビゲーション バーを作成します。
  2. フレックス値 30 の div フレックスボックス。
4

0 に答える 0