diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs
index b131ded..3656718 100644
--- a/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs
+++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs
@@ -55,10 +55,10 @@ public class FlexDirection : BaseUtilityPlugin
     protected override ImmutableDictionary<string, string> Utilities =>
         new Dictionary<string, string>()
         {
-            { "flex-row	", "row" },
+            { "flex-row", "row" },
             { "flex-row-reverse", "row-reverse" },
-            { "flex-col", "col" },
-            { "flex-col-reverse", "col-reverse" },
+            { "flex-col", "column" },
+            { "flex-col-reverse", "column-reverse" },
         }.ToImmutableDictionary();
 }
 
diff --git a/test/MonorailCss.Tests/Plugins/Flex/FlexDirectionTests.cs b/test/MonorailCss.Tests/Plugins/Flex/FlexDirectionTests.cs
new file mode 100644
index 0000000..676e95b
--- /dev/null
+++ b/test/MonorailCss.Tests/Plugins/Flex/FlexDirectionTests.cs
@@ -0,0 +1,21 @@
+namespace MonorailCss.Tests.Plugins.Flex;
+
+public class FlexDirectionTests
+{
+    [Fact]
+    public void Can_do_flex_direction()
+    {
+        var framework = new CssFramework(MonorailCss.DesignSystem.Default).WithCssReset(string.Empty);
+        var r =framework.Process(new[] {"flex-col", "md:flex-row"});
+        r.ShouldBeCss(@"
+.flex-col {
+  flex-direction:column;
+}
+@media (min-width:768px) {
+  .md\:flex-row {
+    flex-direction:row;
+  }
+}
+");
+    }
+}
\ No newline at end of file