Question

我想为我的Web应用程序设计一个布局，使用角度材质设计，并在flexbox上构建布局。

在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>

创建一个固定的导航栏，其中包含两个不同颜色的块。
灵活值为30的div flexbox。

如何创建固定的navbar flex

0 个答案: