Skip to content

Instantly share code, notes, and snippets.

@adityadroid

adityadroid/flex-with-nested-containers.markdown

Forked from anonymous/flex-with-nested-containers.markdown
Created December 29, 2016 10:45
Show Gist options
  • Save adityadroid/7c2df73ef96bc0c080a2f4b53cb7ce8f to your computer and use it in GitHub Desktop.
Save adityadroid/7c2df73ef96bc0c080a2f4b53cb7ce8f to your computer and use it in GitHub Desktop.
Download ZIP
Flex with Nested Containers
Raw
flex-with-nested-containers.markdown
Raw
index.html
<body layout="row" ng-app="myApp" class="icondemoFontIconsWithLigatures" ng-cloak>
<div flex="30" layout="column" class="boxWithHeight" layout-padding>
flex="30"
<section flex="40">flex="40"</section>
<section flex>flex</section>
</div>
<div flex layout="column" class="boxWithHeight" layout-padding>
flex
<section flex="70">flex="70"</section>
<section flex="20">flex="20"</section>
<section flex >flex </section>
</div>
</body>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
Raw
script.js
angular.module('myApp',['ngMaterial'])
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
Raw
style.css
body[ng-cloak] {
display:none;
}
body {
background-color: #FEEBC8;
}
div[flex="30"] {
background-color: #DFDFDF;
}
section[flex="40"] {
background-color: #D4E5FA;
}
section[flex="70"] {
background-color: #E8FCD6;
}
section[flex="20"] {
background-color: #FFD5E3;
}
section[flex=""] {
background-color: rgba(0, 128, 0, 0.35);
}
/* Important to set height for column layout */
.boxWithHeight {
box-sizing: border-box;
height: 100%;
}
.a, section {
border: 5px solid rgba(85, 97, 85, 0.27);
margin: 5px;
}
section {
background-color: #dedede;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/
Raw
styles
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment