update components
This commit is contained in:
parent
4f48507a2d
commit
4a87b99666
16 changed files with 428 additions and 50 deletions
|
@ -20,14 +20,14 @@ The layout class stylesheet provides a simple set of class-based flexbox rules,
|
|||
let you specify layout properties directly in markup. You must include this file
|
||||
in every element that needs to use them.
|
||||
|
||||
Sample use:
|
||||
Sample use:
|
||||
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
|
||||
<div class="layout horizontal layout-start">
|
||||
<div>cross axis start alignment</div>
|
||||
</div>
|
||||
<div class="layout horizontal layout-start">
|
||||
<div>cross axis start alignment</div>
|
||||
</div>
|
||||
|
||||
2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
|
||||
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
|
||||
|
@ -218,6 +218,12 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
|||
align-items: flex-end;
|
||||
};
|
||||
|
||||
--layout-baseline: {
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
};
|
||||
|
||||
/* alignment in main axis */
|
||||
|
||||
--layout-start-justified: {
|
||||
|
@ -281,6 +287,49 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
|||
align-self: stretch;
|
||||
};
|
||||
|
||||
--layout-self-baseline: {
|
||||
-ms-align-self: baseline;
|
||||
-webkit-align-self: baseline;
|
||||
align-self: baseline;
|
||||
};
|
||||
|
||||
/* multi-line alignment in main axis */
|
||||
|
||||
--layout-start-aligned: {
|
||||
-ms-flex-line-pack: start; /* IE10 */
|
||||
-ms-align-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
};
|
||||
|
||||
--layout-end-aligned: {
|
||||
-ms-flex-line-pack: end; /* IE10 */
|
||||
-ms-align-content: flex-end;
|
||||
-webkit-align-content: flex-end;
|
||||
align-content: flex-end;
|
||||
};
|
||||
|
||||
--layout-center-aligned: {
|
||||
-ms-flex-line-pack: center; /* IE10 */
|
||||
-ms-align-content: center;
|
||||
-webkit-align-content: center;
|
||||
align-content: center;
|
||||
};
|
||||
|
||||
--layout-between-aligned: {
|
||||
-ms-flex-line-pack: justify; /* IE10 */
|
||||
-ms-align-content: space-between;
|
||||
-webkit-align-content: space-between;
|
||||
align-content: space-between;
|
||||
};
|
||||
|
||||
--layout-around-aligned: {
|
||||
-ms-flex-line-pack: distribute; /* IE10 */
|
||||
-ms-align-content: space-around;
|
||||
-webkit-align-content: space-around;
|
||||
align-content: space-around;
|
||||
};
|
||||
|
||||
/*******************************
|
||||
Other Layout
|
||||
*******************************/
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue