%!s(int64=2) %!d(string=hai) anos · 8200d1f68b
--- a/Tests/LibWeb/Layout/expected/flex/flex-row-reverse-with-centered-content.txt
+++ b/Tests/LibWeb/Layout/expected/flex/flex-row-reverse-with-centered-content.txt
@@ -0,0 +1,19 @@
 
				+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
			
 
				+  BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
			
 
				+    BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
			
 
				+      Box <div.flex> at (8,8) content-size 784x50 flex-container(row-reverse) [FFC] children: not-inline
			
 
				+        BlockContainer <div> at (425,8) content-size 50x50 flex-item [BFC] children: inline
			
 
				+          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
			
 
				+            frag 0 from TextNode start: 0, length: 1, rect: [425,8 6.34375x17.46875]
			
 
				+              "1"
			
 
				+          TextNode <#text>
			
 
				+        BlockContainer <div> at (375,8) content-size 50x50 flex-item [BFC] children: inline
			
 
				+          line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
			
 
				+            frag 0 from TextNode start: 0, length: 1, rect: [375,8 8.8125x17.46875]
			
 
				+              "2"
			
 
				+          TextNode <#text>
			
 
				+        BlockContainer <div> at (325,8) content-size 50x50 flex-item [BFC] children: inline
			
 
				+          line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
			
 
				+            frag 0 from TextNode start: 0, length: 1, rect: [325,8 9.09375x17.46875]
			
 
				+              "3"
			
 
				+          TextNode <#text>
			
--- a/Tests/LibWeb/Layout/input/flex/flex-row-reverse-with-centered-content.html
+++ b/Tests/LibWeb/Layout/input/flex/flex-row-reverse-with-centered-content.html
@@ -0,0 +1,11 @@
 
				+<!doctype html><style>
			
 
				+    .flex {
			
 
				+        display: flex;
			
 
				+        flex-direction: row-reverse;
			
 
				+        justify-content: center;
			
 
				+
			
 
				+    }
			
 
				+    .flex > div {
			
 
				+        width: 50px;
			
 
				+        height: 50px;
			
 
				+    }</style><body><div class="flex"><div style="background-color: red;">1</div><div style="background-color: blue;">2</div><div style="background-color: yellow;">3</div>
			
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1268,6 +1268,9 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
 
				                 break;
			
 
				             case CSS::JustifyContent::Center:
			
 
				                 initial_offset = (inner_main_size(flex_container()) - used_main_space) / 2.0f;
			
 
				+                if (is_direction_reverse()) {
			
 
				+                    initial_offset = inner_main_size(flex_container()) - initial_offset;
			
 
				+                }
			
 
				                 break;
			
 
				             case CSS::JustifyContent::SpaceBetween:
			
 
				                 space_between_items = flex_line.remaining_free_space / (number_of_items - 1);