diff --git a/addon/components/layout/stack/item.hbs b/addon/components/layout/stack/item.hbs
index f49db3be..adf3ae40 100644
--- a/addon/components/layout/stack/item.hbs
+++ b/addon/components/layout/stack/item.hbs
@@ -1,4 +1,8 @@
{{yield}}
+>{{yield}}
\ No newline at end of file
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
index 0ba41e11..f87a0217 100644
--- a/addon/styles/addon.css
+++ b/addon/styles/addon.css
@@ -75,6 +75,17 @@
border-bottom: 1px solid var(--layout-stack-separator-color);
}
+/* "Floating" is achieved via margin: auto */
+.layout-stack-item--bottom {
+ margin-top: auto;
+}
+
+.layout-stack-item--center,
+.layout-stack-item--center:not(:last-child) {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
/* Cluster */
.layout-cluster {
--cluster-gap-size: var(--layout-cluster-gap);
diff --git a/tests/dummy/app/controllers/stack.js b/tests/dummy/app/controllers/stack.js
index 137cb198..2fb654e3 100644
--- a/tests/dummy/app/controllers/stack.js
+++ b/tests/dummy/app/controllers/stack.js
@@ -17,4 +17,18 @@ export default class StackController extends Controller {
- Second item
- Third item
`;
+
+ stackCodeBottom = `
+ - First item
+ - Second item
+ - Third item
+ - Fourth item
+`;
+
+ stackCodeCenter = `
+ - First item
+ - Second item
+ - Third item
+ - Fourth item
+`;
}
diff --git a/tests/dummy/app/templates/stack.hbs b/tests/dummy/app/templates/stack.hbs
index e261e10e..7dd66415 100644
--- a/tests/dummy/app/templates/stack.hbs
+++ b/tests/dummy/app/templates/stack.hbs
@@ -91,5 +91,98 @@
+
+
+
+ Configuration options on items
+
+
+
+ You can also specify some options on the stack items.
+
+
+
+
+
+ Float items to the bottom
+
+
+
+ Note that this will require the stack to be a specified height (e.g.
+ full height) to have an effect.
+
+
+
+
+
+
+
+ {{! template-lint-disable no-inline-styles }}
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+ Float items to the center
+
+
+
+ Note that this will require the stack to be a specified height (e.g.
+ full height) to have an effect.
+
+
+
+
+
+
+
+ {{! template-lint-disable no-inline-styles }}
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
\ No newline at end of file