diff --git a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
index f1ff65e86d..be7303da24 100644
--- a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
+++ b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
@@ -148,19 +148,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.row.reverse.outer.start> at (11,507) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (260,508) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,508) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 5, rect: [260,508 41.234375x17.46875]
+            frag 0 from TextNode start: 0, length: 5, rect: [12,508 41.234375x17.46875]
               "start"
           TextNode <#text>
-        BlockContainer <div> at (208,508) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (64,508) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [208,508 9.34375x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (156,508) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (116,508) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [156,508 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [116,508 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline
@@ -184,37 +184,37 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,630) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.row.reverse.outer.end> at (11,631) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (-40,632) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (260,632) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 3, rect: [-40,632 26.1875x17.46875]
+            frag 0 from TextNode start: 0, length: 3, rect: [260,632 26.1875x17.46875]
               "end"
           TextNode <#text>
-        BlockContainer <div> at (-92,632) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (208,632) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [-92,632 9.34375x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [208,632 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (-144,632) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (156,632) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [-144,632 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [156,632 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,692) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.row.reverse.outer.flex-end> at (11,693) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (-40,694) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,694) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 8, rect: [-40,694 61.765625x17.46875]
+            frag 0 from TextNode start: 0, length: 8, rect: [12,694 61.765625x17.46875]
               "flex-end"
           TextNode <#text>
-        BlockContainer <div> at (-92,694) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (64,694) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [-92,694 9.34375x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (-144,694) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (116,694) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [-144,694 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [116,694 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline
@@ -436,19 +436,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,3418) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.column.reverse.outer.start> at (11,3419) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (12,3668) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,3420) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 5, rect: [12,3668 41.234375x17.46875]
+            frag 0 from TextNode start: 0, length: 5, rect: [12,3420 41.234375x17.46875]
               "start"
           TextNode <#text>
-        BlockContainer <div> at (12,3616) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,3472) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,3616 9.34375x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (12,3564) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,3524) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,3564 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,3524 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,3720) content-size 780x0 children: inline
@@ -472,37 +472,37 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,4022) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.column.reverse.outer.end> at (11,4023) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (12,3972) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4272) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 3, rect: [12,3972 26.1875x17.46875]
+            frag 0 from TextNode start: 0, length: 3, rect: [12,4272 26.1875x17.46875]
               "end"
           TextNode <#text>
-        BlockContainer <div> at (12,3920) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4220) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,3920 9.34375x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,4220 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (12,3868) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4168) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,3868 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,4168 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,4324) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.column.reverse.outer.flex-end> at (11,4325) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (12,4274) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4326) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 8, rect: [12,4274 61.765625x17.46875]
+            frag 0 from TextNode start: 0, length: 8, rect: [12,4326 61.765625x17.46875]
               "flex-end"
           TextNode <#text>
-        BlockContainer <div> at (12,4222) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4378) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,4222 9.34375x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (12,4170) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4430) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,4170 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,4430 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,4626) content-size 780x0 children: inline
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 4fd48a79c8..35b9c96016 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1303,6 +1303,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
         if (auto_margins == 0 && number_of_items > 0) {
             switch (flex_container().computed_values().justify_content()) {
             case CSS::JustifyContent::Start:
+                initial_offset = 0;
+                break;
             case CSS::JustifyContent::FlexStart:
                 if (is_direction_reverse()) {
                     initial_offset = inner_main_size(flex_container());
@@ -1311,6 +1313,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
                 }
                 break;
             case CSS::JustifyContent::End:
+                initial_offset = inner_main_size(flex_container());
+                break;
             case CSS::JustifyContent::FlexEnd:
                 if (is_direction_reverse()) {
                     initial_offset = 0;
@@ -1364,13 +1368,18 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
         auto flex_region_render_cursor = FlexRegionRenderCursor::Left;
 
         switch (flex_container().computed_values().justify_content()) {
-        case CSS::JustifyContent::Start:
         case CSS::JustifyContent::FlexStart:
+        case CSS::JustifyContent::Center:
+        case CSS::JustifyContent::SpaceAround:
+        case CSS::JustifyContent::SpaceBetween:
+        case CSS::JustifyContent::SpaceEvenly:
             if (is_direction_reverse()) {
                 flex_region_render_cursor = FlexRegionRenderCursor::Right;
             }
             break;
         case CSS::JustifyContent::End:
+            flex_region_render_cursor = FlexRegionRenderCursor::Right;
+            break;
         case CSS::JustifyContent::FlexEnd:
             if (!is_direction_reverse()) {
                 flex_region_render_cursor = FlexRegionRenderCursor::Right;
@@ -1392,7 +1401,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
                 + item.padding.main_after
                 + space_between_items;
 
-            if (is_direction_reverse()) {
+            if (is_direction_reverse() && flex_region_render_cursor == FlexRegionRenderCursor::Right) {
                 item.main_offset = cursor_offset - item.main_size.value() - item.margins.main_after - item.borders.main_after - item.padding.main_after;
                 cursor_offset -= amount_of_main_size_used;
             } else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
@@ -1404,7 +1413,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
             }
         };
 
-        if (is_direction_reverse() || flex_region_render_cursor == FlexRegionRenderCursor::Right) {
+        if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
             for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) {
                 auto& item = flex_line.items[i];
                 place_item(item);