Skip to content

Improve flex layout free space distribution #422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tordex merged 11 commits into from
Sep 9, 2025
Merged

Improve flex layout free space distribution #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2f11e96
Removed unnecessary "after algorithm" space distribution
DRKV333 Aug 6, 2025
85382c2
Fixed flex grow factor sum also counting frozen items
DRKV333 Aug 13, 2025
fffbe56
Fixed explicit flex-basis interpretation
DRKV333 Aug 20, 2025
792bfe3
Use hypothetical main size for collecting lines and choosing factor
DRKV333 Aug 23, 2025
ef9fe7a
Changed space distribution algorithm to match to the spec
DRKV333 Aug 29, 2025
078bcb8
Fixed max violations not freezing
DRKV333 Aug 30, 2025
ec4362d
Exit early if all items are inflexible
DRKV333 Aug 31, 2025
09caf8a
Fixed scaled shrink factor using outer base size instead of inner
DRKV333 Aug 31, 2025
2abf475
Removed some unnecessary box sizing checks
DRKV333 Sep 1, 2025
b8def98
Fixed more render vs content offset problems
DRKV333 Sep 1, 2025
3f67f93
Removed unused factor sum fields
DRKV333 Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion include/litehtml/flex_item.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,43 @@ namespace litehtml
{
class flex_line;

enum flex_clamp_state
{
flex_clamp_state_unclamped,
flex_clamp_state_inflexible,
flex_clamp_state_min_violation,
flex_clamp_state_max_violation
};

/**
* Base class for flex item
*/
class flex_item
{
public:
std::shared_ptr<render_item> el;

// All sizes should be interpreted as outer/margin-box sizes.
pixel_t base_size;
pixel_t min_size;
def_value<pixel_t> max_size;
pixel_t main_size;
pixel_t main_size; // Holds the outer hypothetical main size before distribute_free_space, and the used outer main size after.

int grow;
int shrink;
pixel_t scaled_flex_shrink_factor;

bool frozen;
flex_clamp_state clamp_state;

int order;
int src_order;

def_value<pixel_t> auto_margin_main_start;
def_value<pixel_t> auto_margin_main_end;
bool auto_margin_cross_start;
bool auto_margin_cross_end;

flex_align_items align;

explicit flex_item(std::shared_ptr<render_item> &_el) :
Expand All @@ -41,6 +57,7 @@ namespace litehtml
shrink(0),
scaled_flex_shrink_factor(0),
frozen(false),
clamp_state(flex_clamp_state_unclamped),
order(0),
src_order(0),
auto_margin_main_start(0),
Expand Down
9 changes: 4 additions & 5 deletions include/litehtml/flex_line.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,9 @@ namespace litehtml
public:
std::list<std::shared_ptr<flex_item>> items;
pixel_t cross_start; // for row direction: top. for column direction: left
pixel_t main_size; // sum of all items main size
pixel_t main_size; // sum of all items main size, initially the sum of hypothetical main sizes
pixel_t cross_size; // sum of all items cross size
pixel_t base_size;
int total_grow;
int total_shrink;
int num_auto_margin_main_start; // number of items with auto margin left/top
int num_auto_margin_main_end; // number of items with auto margin right/bottom
baseline first_baseline;
Expand All @@ -29,8 +27,6 @@ namespace litehtml
main_size(0),
cross_size(0),
base_size(0),
total_grow(0),
total_shrink(0),
num_auto_margin_main_start(0),
num_auto_margin_main_end(0),
first_baseline(),
Expand All @@ -50,6 +46,9 @@ namespace litehtml
formatting_context *fmt_ctx);
protected:
void distribute_free_space(pixel_t container_main_size);
void distribute_free_space_grow(pixel_t container_main_size);
void distribute_free_space_shrink(pixel_t container_main_size);
bool fix_min_max_violations();
};
}

Expand Down
36 changes: 24 additions & 12 deletions src/flex_item.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,18 @@ void litehtml::flex_item::init(const litehtml::containing_block_context &self_si
{
align = el->css().get_flex_align_self();
}
main_size = base_size;
scaled_flex_shrink_factor = base_size * shrink;

if (base_size < min_size)
{
main_size = min_size;
} else if (!max_size.is_default() && base_size > max_size)
{
main_size = max_size;
} else
{
main_size = base_size;
}

frozen = false;
}

Expand Down Expand Up @@ -137,12 +147,12 @@ void litehtml::flex_item_row_direction::direction_specific_init(const litehtml::
} else
{
min_size = el->css().get_min_width().calc_percent(self_size.render_width) +
el->content_offset_width();
el->render_offset_width();
}
if (!el->css().get_max_width().is_predefined())
{
max_size = el->css().get_max_width().calc_percent(self_size.render_width) +
el->content_offset_width();
el->render_offset_width();
}
bool flex_basis_predefined = el->css().get_flex_basis().is_predefined();
int predef = flex_basis_auto;
Expand Down Expand Up @@ -199,9 +209,10 @@ void litehtml::flex_item_row_direction::direction_specific_init(const litehtml::
} else
{
base_size = el->css().get_flex_basis().calc_percent(self_size.render_width) +
el->content_offset_width();
base_size = std::max(base_size, min_size);
el->render_offset_width();
}

scaled_flex_shrink_factor = (base_size - el->render_offset_width()) * shrink;
}

void litehtml::flex_item_row_direction::apply_main_auto_margins()
Expand Down Expand Up @@ -320,12 +331,12 @@ void litehtml::flex_item_column_direction::direction_specific_init(const litehtm
} else
{
min_size = el->css().get_min_height().calc_percent(self_size.height) +
el->content_offset_height();
el->render_offset_height();
}
if (!el->css().get_max_height().is_predefined())
{
max_size = el->css().get_max_height().calc_percent(self_size.height) +
el->content_offset_width();
el->render_offset_height();
}

bool flex_basis_predefined = el->css().get_flex_basis().is_predefined();
Expand All @@ -351,7 +362,7 @@ void litehtml::flex_item_column_direction::direction_specific_init(const litehtm
{
case flex_basis_auto:
base_size = el->css().get_height().calc_percent(self_size.height) +
el->content_offset_height();
el->render_offset_height();
break;
case flex_basis_max_content:
case flex_basis_fit_content:
Expand All @@ -371,17 +382,18 @@ void litehtml::flex_item_column_direction::direction_specific_init(const litehtm
if(self_size.height.type == containing_block_context::cbc_value_type_absolute)
{
base_size = el->css().get_flex_basis().calc_percent(self_size.height) +
el->content_offset_height();
el->render_offset_height();
} else
{
base_size = 0;
}
} else
{
base_size = (pixel_t) el->css().get_flex_basis().val() + el->content_offset_height();
base_size = (pixel_t) el->css().get_flex_basis().val() + el->render_offset_height();
}
base_size = std::max(base_size, min_size);
}

scaled_flex_shrink_factor = (base_size - el->render_offset_height()) * shrink;
}

void litehtml::flex_item_column_direction::apply_main_auto_margins()
Expand Down
Loading
Loading