diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index eae3aa6634..86c212fc10 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1451,6 +1451,7 @@ void FlexFormattingContext::align_all_flex_lines() sum_of_flex_line_cross_sizes += line.cross_size; float start_of_current_line = 0; + float gap_size = 0; switch (flex_container().computed_values().align_content()) { case CSS::AlignContent::FlexStart: start_of_current_line = 0; @@ -1461,12 +1462,30 @@ void FlexFormattingContext::align_all_flex_lines() case CSS::AlignContent::Center: start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2); break; - case CSS::AlignContent::SpaceBetween: - dbgln("FIXME: align-content: space-between"); + case CSS::AlignContent::SpaceBetween: { + start_of_current_line = 0; + + float leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes; + if (leftover_free_space >= 0) { + int gap_count = m_flex_lines.size() - 1; + gap_size = leftover_free_space / gap_count; + } break; - case CSS::AlignContent::SpaceAround: - dbgln("FIXME: align-content: space-around"); + } + case CSS::AlignContent::SpaceAround: { + float leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes; + if (leftover_free_space < 0) { + // If the leftover free-space is negative this value is identical to center. + start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2); + break; + } + + gap_size = leftover_free_space / m_flex_lines.size(); + + // The spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. + start_of_current_line = gap_size / 2; break; + } case CSS::AlignContent::Stretch: start_of_current_line = 0; break; @@ -1477,7 +1496,7 @@ void FlexFormattingContext::align_all_flex_lines() for (auto* flex_item : flex_line.items) { flex_item->cross_offset += center_of_current_line; } - start_of_current_line += flex_line.cross_size; + start_of_current_line += flex_line.cross_size + gap_size; } } }