RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:37:35 +00:00
Code Issues Activity Actions

LibWeb: Express flex item cross axis alignment as offsets-from-center

Browse source 
This allows us to perform cross axis alignment without knowing the final
cross size of the flex container.
This commit is contained in:
Andreas Kling 2022-07-12 15:54:11 +02:00
parent 5f78e780f5
commit dc13ced1a7
1 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -1240,20 +1240,20 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
float line_cross_offset = 0; float line_cross_offset = 0;
for (auto& flex_line : m_flex_lines) { for (auto& flex_line : m_flex_lines) {
for (auto* flex_item : flex_line.items) { for (auto* flex_item : flex_line.items) {
float half_line_size = flex_line.cross_size / 2.0f;
switch (alignment_for_item(*flex_item)) { switch (alignment_for_item(*flex_item)) {
case CSS::AlignItems::Baseline: case CSS::AlignItems::Baseline:
// FIXME: Implement this // FIXME: Implement this
// Fallthrough // Fallthrough
case CSS::AlignItems::FlexStart: case CSS::AlignItems::FlexStart:
case CSS::AlignItems::Stretch: case CSS::AlignItems::Stretch:
flex_item->cross_offset = line_cross_offset + flex_item->margins.cross_before + flex_item->borders.cross_before + flex_item->padding.cross_before; flex_item->cross_offset = 0 - half_line_size + flex_item->margins.cross_before + flex_item->borders.cross_before + flex_item->padding.cross_before;
break; break;
case CSS::AlignItems::FlexEnd: case CSS::AlignItems::FlexEnd:
flex_item->cross_offset = line_cross_offset + flex_line.cross_size - flex_item->cross_size; flex_item->cross_offset = half_line_size - flex_item->cross_size - flex_item->margins.cross_after - flex_item->borders.cross_after - flex_item->padding.cross_after;
break; break;
case CSS::AlignItems::Center: case CSS::AlignItems::Center:
flex_item->cross_offset = line_cross_offset + (flex_line.cross_size / 2.0f) - (flex_item->cross_size / 2.0f); flex_item->cross_offset = 0 - (flex_item->cross_size / 2.0f);
break;
default: default:
break; break;
} }
@ -1300,8 +1300,10 @@ void FlexFormattingContext::align_all_flex_lines()
// For single-line flex containers, we only need to center the line along the cross axis. // For single-line flex containers, we only need to center the line along the cross axis.
auto& flex_line = m_flex_lines[0]; auto& flex_line = m_flex_lines[0];
float cross_size_of_flex_container = specified_cross_size(flex_container()); float cross_size_of_flex_container = specified_cross_size(flex_container());
for (auto* flex_item : flex_line.items) float center_of_line = cross_size_of_flex_container / 2.0f;
flex_item->cross_offset += (cross_size_of_flex_container / 2.0f) - (flex_line.cross_size / 2.0f); for (auto* flex_item : flex_line.items) {
flex_item->cross_offset += center_of_line;
}
} else { } else {
// FIXME: Support align-content // FIXME: Support align-content
} }