Version 8 : How to achieve consistent horizontal alignment in flex column?


When aligning items inside a flex container, images are placed differently than for instance labels or buttons. How can I achieve a consistens alignment without using padding ?

What MCU/Processor/Board and compiler are you using?

LInux (monitor.c/fbdev.c)

What LVGL version are you using?

Version 8

What do you want to achieve?

Horizontal alignment with styles for all children of a flex container.

What have you tried so far?

Adjust the alignment with padding.

Code to reproduce

The code block(s) should be formatted like:

        lv_style_set_align(&flex_style, LV_ALIGN_CENTER);
        lv_style_set_flex_flow(&flex_style, LV_FLEX_FLOW_COLUMN);
        lv_style_set_width(&flex_style, 500);
        lv_style_set_flex_main_place(&flex_style, LV_FLEX_ALIGN_SPACE_EVENLY);
        lv_style_set_pad_left(&flex_style, 100);
        lv_style_set_layout(&flex_style, LV_LAYOUT_FLEX);

        lv_obj_t* flex = lv_obj_create(lv_scr_act());
        lv_obj_set_size(flex, 500, 500);
        lv_obj_add_style(flex, &flex_style, LV_PART_MAIN);

        lv_obj_t* heading = lv_label_create(flex);
        lv_label_set_text_fmt(heading, "%s", "Header");
        lv_label_set_long_mode(heading, LV_LABEL_LONG_WRAP);
        lv_obj_set_style_text_color(heading, lv_color_white());
        lv_obj_set_flex_align(heading, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);

        lv_obj_t* img = lv_img_create(flex);
        lv_img_set_src(img, &img_0601_center);
	//why necessary at all?
        lv_obj_set_style_pad_left(img, 150, 0);

Screenshot and/or video

Thanks for tipps. I guess there are better ways than using padding. Aligning the image via styles did not work.

I don’t want to bump my own thread, but I do it anyway :smiley:. I understand, that this is kind of a nit-picking question, I must have understood something wrong about flex columns. As far as I remember in Version 7, the containers allowed easy horizontal placement within a column. How would one go about to simply adjust the x placement of images and buttons in a flex column ? In my case :

        lv_obj_set_flex_align(something, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_END);

does not seem to have any effect in most cases. I probably just don’t get it.