fix(flex): fix alignment issue when using rtl in flex layout (#8929)

src/layouts/flex/lv_flex.c

@@ -386,7 +386,7 @@ static void children_repos(lv_obj_t * cont, flex_t * f, int32_t item_first_id, i
 
     int32_t place_gap = 0;
     place_content(f->main_place, max_main_size, t->track_main_size, t->item_cnt, &main_pos, &place_gap);
-    if(f->row && rtl) main_pos += lv_obj_get_content_width(cont);
+    if(f->row && rtl) main_pos = max_main_size - main_pos;
 
     lv_obj_t * item = lv_obj_get_child(cont, item_first_id);
     /*Reposition the children*/

tests/src/test_cases/test_align_flex.c

@@ -170,5 +170,25 @@ void test_flex_hide_items(void)
     TEST_ASSERT_EQUAL_SCREENSHOT("flex_hide_items.png");
 }
 
+void test_flex_use_rtl(void)
+{
+    lv_obj_t * test = lv_obj_create(lv_screen_active());
+    lv_obj_center(test);
+    lv_obj_set_width(test, LV_PCT(40));
+    lv_obj_set_height(test, LV_SIZE_CONTENT);
+    lv_obj_set_style_border_width(test, 2, 0);
+    lv_obj_set_style_base_dir(test, LV_BASE_DIR_RTL, 0);
+
+    lv_obj_set_flex_flow(test, LV_FLEX_FLOW_ROW_WRAP);
+    lv_obj_set_flex_align(test, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
+
+    for(int i = 0; i < 8; i++) {
+        lv_obj_t * obj = lv_obj_create(test);
+        lv_obj_set_size(obj, 70, 70);
+        lv_obj_set_style_border_width(obj, 2, 0);
+    }
+
+    TEST_ASSERT_EQUAL_SCREENSHOT("flex_use_rtl.png");
+}
 
 #endif