diff --git a/src/base/component/flex.rs b/src/base/component/flex.rs
index 9bff2959..db68c217 100644
--- a/src/base/component/flex.rs
+++ b/src/base/component/flex.rs
@@ -127,9 +127,9 @@ impl ToString for ContentJustify {
 pub enum ItemAlign {
     #[default]
     Default,
-    Top,
-    Bottom,
-    Middle,
+    Start,
+    End,
+    Center,
     Stretch,
     Baseline,
 }
@@ -139,9 +139,9 @@ impl ToString for ItemAlign {
     fn to_string(&self) -> String {
         String::from(match self {
             ItemAlign::Default  => "",
-            ItemAlign::Top      => "flex-item__top",
-            ItemAlign::Bottom   => "flex-item__bottom",
-            ItemAlign::Middle   => "flex-item__middle",
+            ItemAlign::Start    => "flex-item__start",
+            ItemAlign::End      => "flex-item__end",
+            ItemAlign::Center   => "flex-item__center",
             ItemAlign::Stretch  => "flex-item__stretch",
             ItemAlign::Baseline => "flex-item__baseline",
         })
diff --git a/static/base/css/flex.css b/static/base/css/flex.css
index c011e1a1..d8487428 100644
--- a/static/base/css/flex.css
+++ b/static/base/css/flex.css
@@ -67,10 +67,10 @@
 	justify-content: space-evenly;
 }
 
-.flex__container.flex-item__bottom {
+.flex__container.flex-item__end {
 	align-items: flex-end;
 }
-.flex__container.flex-item__middle {
+.flex__container.flex-item__center {
 	align-items: center;
 }
 .flex__container.flex-item__stretch {
@@ -221,13 +221,13 @@
 	margin-left: 90%;
 }
 
-.flex-item__container.flex-item__top {
+.flex-item__container.flex-item__start {
 	align-self: flex-start;
 }
-.flex-item__container.flex-item__bottom {
+.flex-item__container.flex-item__end {
 	align-self: flex-end;
 }
-.flex-item__container.flex-item__middle {
+.flex-item__container.flex-item__center {
 	align-self: center;
 }
 .flex-item__container.flex-item__stretch {