2.0.0 • Published 1 year ago
@dreamworld/flex-layout v2.0.0
flex-layout
The flex-layout component provides simple ways to use CSS flexible box layout, also known as flexbox. use CSS flex styles directly in your code.
The layout class stylesheet provides a simple set of class-based flexbox rules, that let you specify layout properties directly in markup. You must include this file in every element that needs to use them.
Usage
Installation
npm install --save @dreamworld/flex-layout
In a lit element
import { LitElement } from '@dreamworld/pwa-helpers/lit.js';
import { flexLayout, alignment } from '@dreamworld/flex-layout';
class SampleElement extends LitElement {
static get styles() {
return [
flexLayout,
alignment,
css`
:host {
display: block;
}
`
];
}
static get template() {
return html`
<div class="layout horizontal center-center">
<div class="test">horizontal layout center alignment</div>
</div>
`;
}
}
customElements.define('sample-element', SampleElement);
2.0.0
1 year ago
1.2.0-remove-webkit-fex-style.2
3 years ago
1.2.0-remove-webkit-fex-style.1
3 years ago
1.1.1
4 years ago
1.1.1-update-config.1
4 years ago
1.1.0
4 years ago
1.1.0-layout-mixins.1
4 years ago
1.1.0-css-literal.1
4 years ago
1.1.0-mixins.1
5 years ago
1.1.0-css-literals.1
5 years ago
1.1.0-css-mixins.1
5 years ago
1.1.0-css-mixin.1
5 years ago
1.0.0
5 years ago