Implement flexbox (#277)

This implement the flexbox elements, following the HTML one. Built from them, there is also the following elements: - `paragraph` - `paragraphAlignLeft` - `paragraphAlignRight` - `paragraphAlignCenter` - `paragraphAlignJustify` This is a breaking change.
2025-09-28 16:29:34 +08:00 · 2021-12-11 17:58:25 +01:00
parent f7c6bf91a7
commit 602392c43d
70 changed files with 2163 additions and 300 deletions
--- a/examples/component/CMakeLists.txt
+++ b/examples/component/CMakeLists.txt
@@ -5,6 +5,7 @@ example(checkbox)
 example(checkbox_in_frame)
 example(composition)
 example(dropdown)
+example(flexbox)
 example(gallery)
 example(homescreen)
 example(input)
--- a/examples/component/checkbox.cpp
+++ b/examples/component/checkbox.cpp
@@ -1,6 +1,12 @@
+#include <memory>  // for allocator, __shared_ptr_access
+#include <string>  // for string, basic_string, operator+, to_string
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Input, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/component/component.hpp"
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
@@ -19,3 +25,7 @@ int main(int argc, const char* argv[]) {
  auto screen = ScreenInteractive::TerminalOutput();
  screen.Loop(renderer);
 }
+
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
--- a/examples/component/flexbox.cpp
+++ b/examples/component/flexbox.cpp
@@ -0,0 +1,192 @@
+#include <stddef.h>  // for size_t
+#include <memory>    // for shared_ptr, __shared_ptr_access, allocator
+#include <string>  // for string, basic_string, to_string, operator+, char_traits
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Radiobox, Vertical, Checkbox, Horizontal, Renderer, ResizableSplitBottom, ResizableSplitRight
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, window, operator|, vbox, hbox, Element, flexbox, bgcolor, filler, flex, size, border, hcenter, color, EQUAL, bold, dim, notflex, xflex_grow, yflex_grow, HEIGHT, WIDTH
+#include "ftxui/dom/flexbox_config.hpp"  // for FlexboxConfig, FlexboxConfig::AlignContent, FlexboxConfig::JustifyContent, FlexboxConfig::AlignContent::Center, FlexboxConfig::AlignItems, FlexboxConfig::Direction, FlexboxConfig::JustifyContent::Center, FlexboxConfig::Wrap
+#include "ftxui/screen/color.hpp"        // for Color, Color::Black
+
+using namespace ftxui;
+
+int main(int argc, const char* argv[]) {
+  auto screen = ScreenInteractive::Fullscreen();
+
+  int direction_index = 0;
+  int wrap_index = 0;
+  int justify_content_index = 0;
+  int align_items_index = 0;
+  int align_content_index = 0;
+
+  std::vector<std::string> directions = {
+      "Row",
+      "RowInversed",
+      "Column",
+      "ColumnInversed",
+  };
+
+  std::vector<std::string> wraps = {
+      "NoWrap",
+      "Wrap",
+      "WrapInversed",
+  };
+
+  std::vector<std::string> justify_content = {
+      "FlexStart",    "FlexEnd",     "Center",      "Stretch",
+      "SpaceBetween", "SpaceAround", "SpaceEvenly",
+  };
+
+  std::vector<std::string> align_items = {
+      "FlexStart",
+      "FlexEnd",
+      "Center",
+      "Stretch",
+  };
+
+  std::vector<std::string> align_content = {
+      "FlexStart",    "FlexEnd",     "Center",      "Stretch",
+      "SpaceBetween", "SpaceAround", "SpaceEvenly",
+  };
+
+  auto radiobox_direction = Radiobox(&directions, &direction_index);
+  auto radiobox_wrap = Radiobox(&wraps, &wrap_index);
+  auto radiobox_justify_content =
+      Radiobox(&justify_content, &justify_content_index);
+  auto radiobox_align_items = Radiobox(&align_items, &align_items_index);
+  auto radiobox_align_content = Radiobox(&align_content, &align_content_index);
+
+  bool element_xflex_grow = false;
+  bool element_yflex_grow = false;
+  bool group_xflex_grow = true;
+  bool group_yflex_grow = true;
+  auto checkbox_element_xflex_grow =
+      Checkbox("element |= xflex_grow", &element_xflex_grow);
+  auto checkbox_element_yflex_grow =
+      Checkbox("element |= yflex_grow", &element_yflex_grow);
+  auto checkbox_group_xflex_grow =
+      Checkbox("group |= xflex_grow", &group_xflex_grow);
+  auto checkbox_group_yflex_grow =
+      Checkbox("group |= yflex_grow", &group_yflex_grow);
+
+  auto make_box = [&](size_t dimx, size_t dimy, size_t index) {
+    std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
+    auto element = window(text(title) | hcenter | bold,
+                          text(std::to_string(index)) | hcenter | dim) |
+                   size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |
+                   bgcolor(Color::HSV(index * 25, 255, 255)) |
+                   color(Color::Black);
+    if (element_xflex_grow)
+      element = element | xflex_grow;
+    if (element_yflex_grow)
+      element = element | yflex_grow;
+    return element;
+  };
+
+  auto content_renderer = Renderer([&] {
+    FlexboxConfig config;
+    config.direction = static_cast<FlexboxConfig::Direction>(direction_index);
+    config.wrap = static_cast<FlexboxConfig::Wrap>(wrap_index);
+    config.justify_content =
+        static_cast<FlexboxConfig::JustifyContent>(justify_content_index);
+    config.align_items =
+        static_cast<FlexboxConfig::AlignItems>(align_items_index);
+    config.align_content =
+        static_cast<FlexboxConfig::AlignContent>(align_content_index);
+
+    auto group = flexbox(
+        {
+            make_box(8, 4, 0),
+            make_box(9, 6, 1),
+            make_box(11, 6, 2),
+            make_box(10, 4, 3),
+            make_box(13, 7, 4),
+            make_box(12, 4, 5),
+            make_box(12, 5, 6),
+            make_box(10, 4, 7),
+            make_box(12, 4, 8),
+            make_box(10, 5, 9),
+        },
+        config);
+
+    group = group | bgcolor(Color::Black);
+
+    group = group | notflex;
+
+    if (!group_xflex_grow)
+      group = hbox(group, filler());
+    if (!group_yflex_grow)
+      group = vbox(group, filler());
+
+    group = group | flex;
+    return group;
+  });
+
+  auto center = FlexboxConfig()
+                    .Set(FlexboxConfig::JustifyContent::Center)
+                    .Set(FlexboxConfig::AlignContent::Center);
+  int space_right = 10;
+  int space_bottom = 1;
+  content_renderer = ResizableSplitRight(
+      Renderer([&] { return flexbox({text("resizable")}, center); }),
+      content_renderer, &space_right);
+  content_renderer = ResizableSplitBottom(
+      Renderer([&] { return flexbox({text("resizable")}, center); }),
+      content_renderer, &space_bottom);
+
+  auto main_container = Container::Vertical({
+      Container::Horizontal({
+          radiobox_direction,
+          radiobox_wrap,
+          Container::Vertical({
+              checkbox_element_xflex_grow,
+              checkbox_element_yflex_grow,
+              checkbox_group_xflex_grow,
+              checkbox_group_yflex_grow,
+          }),
+      }),
+      Container::Horizontal({
+          radiobox_justify_content,
+          radiobox_align_items,
+          radiobox_align_content,
+      }),
+      content_renderer,
+  });
+
+  auto main_renderer = Renderer(main_container, [&] {
+    return vbox({
+        vbox({hbox({
+                  window(text("FlexboxConfig::Direction"),
+                         radiobox_direction->Render()),
+                  window(text("FlexboxConfig::Wrap"), radiobox_wrap->Render()),
+                  window(text("Misc:"),
+                         vbox({
+                             checkbox_element_xflex_grow->Render(),
+                             checkbox_element_yflex_grow->Render(),
+                             checkbox_group_xflex_grow->Render(),
+                             checkbox_group_yflex_grow->Render(),
+                         })),
+              }),
+              hbox({
+                  window(text("FlexboxConfig::JustifyContent"),
+                         radiobox_justify_content->Render()),
+                  window(text("FlexboxConfig::AlignItems"),
+                         radiobox_align_items->Render()),
+                  window(text("FlexboxConfig::AlignContent"),
+                         radiobox_align_content->Render()),
+              })}),
+        content_renderer->Render() | flex | border,
+    });
+  });
+
+  screen.Loop(main_renderer);
+
+  return 0;
+}
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
--- a/examples/component/homescreen.cpp
+++ b/examples/component/homescreen.cpp
@@ -1,27 +1,33 @@
+#include <stddef.h>    // for size_t
 #include <array>       // for array
 #include <chrono>      // for operator""s, chrono_literals
 #include <cmath>       // for sin
 #include <functional>  // for ref, reference_wrapper, function
 #include <memory>      // for allocator, shared_ptr, __shared_ptr_access
-#include <string>  // for string, basic_string, operator+, char_traits, to_string
+#include <string>  // for string, basic_string, operator+, to_string, char_traits
 #include <thread>   // for sleep_for, thread
 #include <utility>  // for move
 #include <vector>   // for vector

 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Horizontal, Vertical, Menu, Radiobox, Tab, Toggle
+#include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Horizontal, Vertical, Input, Menu, Radiobox, ResizableSplitLeft, Tab, Toggle
 #include "ftxui/component/component_base.hpp"     // for ComponentBase
 #include "ftxui/component/component_options.hpp"  // for InputOption
 #include "ftxui/component/event.hpp"              // for Event, Event::Custom
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for operator|, color, bgcolor, filler, Element, size, vbox, flex, hbox, graph, separator, EQUAL, WIDTH, hcenter, bold, border, window, HEIGHT, Elements, hflow, flex_grow, frame, gauge, LESS_THAN, spinner, dim, GREATER_THAN
-#include "ftxui/screen/color.hpp"  // for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default
+#include "ftxui/dom/elements.hpp"  // for text, operator|, color, bgcolor, filler, Element, size, vbox, flex, hbox, separator, graph, EQUAL, paragraph, hcenter, WIDTH, bold, window, border, vscroll_indicator, Elements, HEIGHT, hflow, frame, flex_grow, flexbox, gauge, paragraphAlignCenter, paragraphAlignJustify, paragraphAlignLeft, paragraphAlignRight, dim, spinner, Decorator, LESS_THAN, center, yflex, GREATER_THAN
+#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::BlueLight, Color::RedLight, Color::Black, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default
+#include "ftxui/screen/terminal.hpp"  // for Size, Dimensions

 using namespace ftxui;

 int main(int argc, const char* argv[]) {
  auto screen = ScreenInteractive::Fullscreen();

+  // ---------------------------------------------------------------------------
+  // HTOP
+  // ---------------------------------------------------------------------------
+
  int shift = 0;

  auto my_graph = [&shift](int width, int height) {
@@ -92,6 +98,10 @@ int main(int argc, const char* argv[]) {
           flex | border;
  });

+  // ---------------------------------------------------------------------------
+  // Compiler
+  // ---------------------------------------------------------------------------
+
  const std::vector<std::string> compiler_entries = {
      "gcc",
      "clang",
@@ -248,6 +258,9 @@ int main(int argc, const char* argv[]) {
           flex_grow | border;
  });

+  // ---------------------------------------------------------------------------
+  // Spiner
+  // ---------------------------------------------------------------------------
  auto spinner_tab_renderer = Renderer([&] {
    Elements entries;
    for (int i = 0; i < 22; ++i) {
@@ -257,6 +270,9 @@ int main(int argc, const char* argv[]) {
    return hflow(std::move(entries)) | border;
  });

+  // ---------------------------------------------------------------------------
+  // Colors
+  // ---------------------------------------------------------------------------
  auto color_tab_renderer = Renderer([] {
    return hbox({
               vbox({
@@ -301,6 +317,9 @@ int main(int argc, const char* argv[]) {
           hcenter | border;
  });

+  // ---------------------------------------------------------------------------
+  // Gauges
+  // ---------------------------------------------------------------------------
  auto render_gauge = [&shift](int delta) {
    float progress = (shift + delta) % 1000 / 1000.f;
    return hbox({
@@ -333,9 +352,84 @@ int main(int argc, const char* argv[]) {
           border;
  });

+  // ---------------------------------------------------------------------------
+  // Paragraph
+  // ---------------------------------------------------------------------------
+  auto make_box = [](size_t dimx, size_t dimy) {
+    std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
+    return window(text(title) | hcenter | bold,
+                  text("content") | hcenter | dim) |
+           size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
+  };
+
+  auto paragraph_renderer_left = Renderer([&] {
+    auto title_style = bold | bgcolor(Color::Blue) | color(Color::Black);
+    std::string str =
+        "Lorem Ipsum is simply dummy text of the printing and typesetting "
+        "industry. Lorem Ipsum has been the industry's standard dummy text "
+        "ever since the 1500s, when an unknown printer took a galley of type "
+        "and scrambled it to make a type specimen book.";
+    return vbox({
+               // [ Left ]
+               text("Align left:") | title_style,
+               paragraphAlignLeft(str),
+               // [ Center ]
+               text("Align center:") | title_style,
+               paragraphAlignCenter(str),
+               // [ Right ]
+               text("Align right:") | title_style,
+               paragraphAlignRight(str),
+               // [ Justify]
+               text("Align justify:") | title_style,
+               paragraphAlignJustify(str),
+               // [ Side by side ]
+               text("Side by side:") | title_style,
+               hbox({
+                   paragraph(str),
+                   separator() | color(Color::Blue),
+                   paragraph(str),
+               }),
+               // [ Misc ]
+               text("Elements with different size:") | title_style,
+               flexbox({
+                   make_box(10, 5),
+                   make_box(9, 4),
+                   make_box(8, 4),
+                   make_box(6, 3),
+                   make_box(10, 5),
+                   make_box(9, 4),
+                   make_box(8, 4),
+                   make_box(6, 3),
+                   make_box(10, 5),
+                   make_box(9, 4),
+                   make_box(8, 4),
+                   make_box(6, 3),
+               }),
+           }) |
+           // vscroll_indicator | yflex;
+           yflex | vscroll_indicator;
+  });
+
+  auto paragraph_renderer_right = Renderer([] {
+    return paragraph("<--- This vertical bar is resizable using the  mouse") |
+           center;
+  });
+
+  int paragraph_renderer_split_position = Terminal::Size().dimx / 2;
+  auto paragraph_renderer_group =
+      ResizableSplitLeft(paragraph_renderer_left, paragraph_renderer_right,
+                         &paragraph_renderer_split_position);
+  auto paragraph_renderer_group_renderer =
+      Renderer(paragraph_renderer_group,
+               [&] { return paragraph_renderer_group->Render() | border; });
+
+  // ---------------------------------------------------------------------------
+  // Tabs
+  // ---------------------------------------------------------------------------
+
  int tab_index = 0;
  std::vector<std::string> tab_entries = {
-      "htop", "color", "spinner", "gauge", "compiler",
+      "htop", "color", "spinner", "gauge", "compiler", "paragraph",
  };
  auto tab_selection = Toggle(&tab_entries, &tab_index);
  auto tab_content = Container::Tab(
@@ -345,6 +439,7 @@ int main(int argc, const char* argv[]) {
          spinner_tab_renderer,
          gauge_component,
          compiler_renderer,
+          paragraph_renderer_group_renderer,
      },
      &tab_index);

--- a/examples/dom/CMakeLists.txt
+++ b/examples/dom/CMakeLists.txt
@@ -11,6 +11,7 @@ example(gauge)
 example(graph)
 example(gridbox)
 example(hflow)
+example(vflow)
 example(html_like)
 example(package_manager)
 example(paragraph)
--- a/examples/dom/border.cpp
+++ b/examples/dom/border.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/border_style.cpp
+++ b/examples/dom/border_style.cpp
@@ -1,10 +1,10 @@
-#include <ftxui/dom/elements.hpp>  // for text, operator|, vbox, border, Element, Fit, hbox
-#include <ftxui/screen/screen.hpp>  // for Full, Screen
-#include <iostream>
-#include <memory>  // for allocator
+#include <ftxui/dom/elements.hpp>  // for operator|, text, Element, Fit, borderDouble, borderHeavy, borderLight, borderRounded, vbox
+#include <ftxui/screen/screen.hpp>  // for Screen
+#include <iostream>                 // for endl, cout, ostream
+#include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/color_info_palette256.cpp
+++ b/examples/dom/color_info_palette256.cpp
@@ -4,9 +4,9 @@
 #include <utility>                      // for move
 #include <vector>                       // for vector, allocator

-#include "ftxui/dom/node.hpp"      // for Render
-#include "ftxui/screen/box.hpp"    // for ftxui
-#include "ftxui/screen/color.hpp"  // for Color, Color::Palette256
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
+#include "ftxui/screen/color.hpp"        // for Color, Color::Palette256

 using namespace ftxui;
 #include "./color_info_sorted_2d.ipp"  // for ColorInfoSorted2D
--- a/examples/dom/color_truecolor_HSV.cpp
+++ b/examples/dom/color_truecolor_HSV.cpp
@@ -3,9 +3,9 @@
 #include <memory>                   // for allocator
 #include <utility>                  // for move

-#include "ftxui/dom/node.hpp"      // for Render
-#include "ftxui/screen/box.hpp"    // for ftxui
-#include "ftxui/screen/color.hpp"  // for Color
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
+#include "ftxui/screen/color.hpp"        // for Color

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/color_truecolor_RGB.cpp
+++ b/examples/dom/color_truecolor_RGB.cpp
@@ -3,9 +3,9 @@
 #include <memory>                   // for allocator
 #include <utility>                  // for move

-#include "ftxui/dom/node.hpp"      // for Render
-#include "ftxui/screen/box.hpp"    // for ftxui
-#include "ftxui/screen/color.hpp"  // for Color
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
+#include "ftxui/screen/color.hpp"        // for Color

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/dbox.cpp
+++ b/examples/dom/dbox.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/gauge.cpp
+++ b/examples/dom/gauge.cpp
@@ -5,8 +5,8 @@
 #include <string>  // for allocator, operator+, char_traits, operator<<, string, to_string, basic_string
 #include <thread>  // for sleep_for

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/graph.cpp
+++ b/examples/dom/graph.cpp
@@ -1,16 +1,16 @@
-#include <chrono>
-#include <cmath>
-#include <ftxui/dom/elements.hpp>
-#include <ftxui/screen/screen.hpp>
-#include <functional>
-#include <iostream>
-#include <string>
-#include <thread>
-#include <vector>
+#include <chrono>                  // for operator""s, chrono_literals
+#include <cmath>                   // for sin
+#include <ftxui/dom/elements.hpp>  // for operator|, graph, separator, color, Element, vbox, flex, inverted, Fit, hbox, size, border, GREATER_THAN, HEIGHT
+#include <ftxui/screen/screen.hpp>  // for Full, Screen
+#include <functional>               // for ref, reference_wrapper
+#include <iostream>                 // for cout, ostream
+#include <string>                   // for operator<<, string
+#include <thread>                   // for sleep_for
+#include <vector>                   // for vector

-#include "ftxui/dom/node.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/color.hpp"
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
+#include "ftxui/screen/color.hpp"  // for Color, Color::BlueLight, Color::RedLight, Color::YellowLight

 class Graph {
 public:
--- a/examples/dom/gridbox.cpp
+++ b/examples/dom/gridbox.cpp
@@ -1,10 +1,10 @@
-#include <stdio.h>                  // for getchar
-#include <ftxui/dom/elements.hpp>   // for filler, text, hbox, vbox
-#include <ftxui/screen/screen.hpp>  // for Full, Screen
-#include <memory>                   // for allocator
+#include <stdio.h>  // for getchar
+#include <ftxui/dom/elements.hpp>  // for Elements, gridbox, Fit, operator|, text, border, Element
+#include <ftxui/screen/screen.hpp>  // for Screen
+#include <memory>                   // for allocator, shared_ptr

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/hflow.cpp
+++ b/examples/dom/hflow.cpp
@@ -1,11 +1,12 @@
 #include <stddef.h>                // for size_t
+#include <stdio.h>                 // for getchar
 #include <ftxui/dom/elements.hpp>  // for operator|, size, Element, text, hcenter, Decorator, Fit, WIDTH, hflow, window, EQUAL, GREATER_THAN, HEIGHT, bold, border, dim, LESS_THAN
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator, shared_ptr
 #include <string>  // for operator+, to_string, char_traits, string

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
@@ -44,6 +45,7 @@ int main(int argc, const char* argv[]) {
  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);
  screen.Print();
+  getchar();

  return 0;
 }
--- a/examples/dom/html_like.cpp
+++ b/examples/dom/html_like.cpp
@@ -44,7 +44,7 @@ int main(int argc, const char* argv[]) {
            paragraph(" A spinner "), spinner(6, i / 10)) |
        border;

-    auto screen = Screen::Create(Dimension::Full());
+    auto screen = Screen::Create(Dimension::Fit(document));
    Render(screen, document);
    std::cout << reset_position;
    screen.Print();
--- a/examples/dom/package_manager.cpp
+++ b/examples/dom/package_manager.cpp
@@ -9,8 +9,8 @@
 #include <utility>  // for move
 #include <vector>   // for vector

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
 #include "ftxui/screen/color.hpp"  // for Color, Color::Green, Color::Red, Color::RedLight

 int main(int argc, const char* argv[]) {
--- a/examples/dom/paragraph.cpp
+++ b/examples/dom/paragraph.cpp
@@ -1,35 +1,50 @@
-#include <stdio.h>  // for getchar
-#include <ftxui/dom/elements.hpp>  // for operator|, hflow, paragraph, border, Element, hbox, flex, vbox
+#include <chrono>                   // for operator""s, chrono_literals
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
-#include <string>                   // for allocator, string
+#include <iostream>                 // for cout, ostream
+#include <memory>                   // for allocator, shared_ptr
+#include <string>                   // for string, operator<<
+#include <thread>                   // for sleep_for

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/elements.hpp"  // for hflow, paragraph, separator, hbox, vbox, filler, operator|, border, Element
+#include "ftxui/dom/node.hpp"      // for Render
+#include "ftxui/screen/box.hpp"    // for ftxui

+using namespace std::chrono_literals;
 int main(int argc, const char* argv[]) {
  using namespace ftxui;
  std::string p =
      R"(In probability theory and statistics, Bayes' theorem (alternatively Bayes' law or Bayes' rule) describes the probability of an event, based on prior knowledge of conditions that might be related to the event. For example, if cancer is related to age, then, using Bayes' theorem, a person's age can be used to more accurately assess the probability that they have cancer, compared to the assessment of the probability of cancer made without knowledge of the person's age. One of the many applications of Bayes' theorem is Bayesian inference, a particular approach to statistical inference. When applied, the probabilities involved in Bayes' theorem may have different probability interpretations. With the Bayesian probability interpretation the theorem expresses how a subjective degree of belief should rationally change to account for availability of related evidence. Bayesian inference is fundamental to Bayesian statistics.)";

-  auto document = vbox({
-      hbox({
-          hflow(paragraph(p)) | border,
-          hflow(paragraph(p)) | border,
-          hflow(paragraph(p)) | border,
-      }) | flex,
-      hbox({
-          hflow(paragraph(p)) | border,
-          hflow(paragraph(p)) | border,
-      }) | flex,
-      hbox({
-          hflow(paragraph(p)) | border,
-      }) | flex,
-  });
+  std::string reset_position;
+  for (int i = 0;; ++i) {
+    auto document = vbox({
+                        hflow(paragraph(p)),
+                        separator(),
+                        hflow(paragraph(p)),
+                        separator(),
+                        hbox({
+                            hflow(paragraph(p)),
+                            separator(),
+                            hflow(paragraph(p)),
+                        }),
+                    }) |
+                    border;

-  auto screen = Screen::Create(Dimension::Full(), Dimension::Full());
-  Render(screen, document);
-  screen.Print();
-  getchar();
+    document = vbox(filler(), document);
+
+    // auto screen = Screen::Create(Dimension::Fit(document));
+    // Render(screen, document);
+    // screen.Print();
+    // getchar();
+
+    auto screen = Screen::Create(Dimension::Full());
+    Render(screen, document);
+    std::cout << reset_position;
+    screen.Print();
+    reset_position = screen.ResetPosition();
+
+    std::this_thread::sleep_for(0.01s);
+  }

  return 0;
 }
--- a/examples/dom/separator.cpp
+++ b/examples/dom/separator.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/size.cpp
+++ b/examples/dom/size.cpp
@@ -4,8 +4,8 @@
 #include <string>                   // for string, to_string
 #include <utility>                  // for move

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/spinner.cpp
+++ b/examples/dom/spinner.cpp
@@ -7,8 +7,8 @@
 #include <utility>                  // for move
 #include <vector>                   // for vector

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/style_blink.cpp
+++ b/examples/dom/style_blink.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/style_bold.cpp
+++ b/examples/dom/style_bold.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/style_dim.cpp
+++ b/examples/dom/style_dim.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/style_gallery.cpp
+++ b/examples/dom/style_gallery.cpp
@@ -2,9 +2,9 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"      // for Render
-#include "ftxui/screen/box.hpp"    // for ftxui
-#include "ftxui/screen/color.hpp"  // for Color, Color::Blue
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
+#include "ftxui/screen/color.hpp"        // for Color, Color::Blue

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/style_inverted.cpp
+++ b/examples/dom/style_inverted.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/style_underlined.cpp
+++ b/examples/dom/style_underlined.cpp
@@ -2,8 +2,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/table.cpp
+++ b/examples/dom/table.cpp
@@ -5,8 +5,8 @@
 #include <string>                   // for basic_string, allocator, string
 #include <vector>                   // for vector

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
 #include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Cyan, Color::White

 int main(int argc, const char* argv[]) {
--- a/examples/dom/vbox_hbox.cpp
+++ b/examples/dom/vbox_hbox.cpp
@@ -3,8 +3,8 @@
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator

-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render

 int main(int argc, const char* argv[]) {
  using namespace ftxui;
--- a/examples/dom/vflow.cpp
+++ b/examples/dom/vflow.cpp
@@ -0,0 +1,52 @@
+#include <stddef.h>                // for size_t
+#include <stdio.h>                 // for getchar
+#include <ftxui/dom/elements.hpp>  // for operator|, Element, size, text, hcenter, Fit, vflow, window, EQUAL, bold, border, dim, HEIGHT, WIDTH
+#include <ftxui/screen/screen.hpp>  // for Full, Screen
+#include <memory>                   // for allocator, shared_ptr
+#include <string>  // for operator+, to_string, char_traits, string
+
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
+
+int main(int argc, const char* argv[]) {
+  using namespace ftxui;
+  auto make_box = [](size_t dimx, size_t dimy) {
+    std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
+    return window(text(title) | hcenter | bold,
+                  text("content") | hcenter | dim) |
+           size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
+  };
+
+  auto document = vflow({
+                      make_box(7, 7),
+                      make_box(7, 5),
+                      make_box(5, 7),
+                      make_box(10, 4),
+                      make_box(10, 4),
+                      make_box(10, 4),
+                      make_box(10, 4),
+                      make_box(11, 4),
+                      make_box(11, 4),
+                      make_box(11, 4),
+                      make_box(11, 4),
+                      make_box(12, 4),
+                      make_box(12, 5),
+                      make_box(12, 4),
+                      make_box(13, 4),
+                      make_box(13, 3),
+                      make_box(13, 3),
+                      make_box(10, 3),
+                  }) |
+                  border;
+
+  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
+  Render(screen, document);
+  screen.Print();
+  getchar();
+
+  return 0;
+}
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
--- a/examples/dom/window.cpp
+++ b/examples/dom/window.cpp
@@ -1,10 +1,10 @@
-#include <ftxui/dom/elements.hpp>
-#include <ftxui/screen/screen.hpp>
-#include <vector>
+#include <ftxui/dom/elements.hpp>  // for operator|, color, Element, bgcolor, graph, border
+#include <ftxui/screen/screen.hpp>  // for Fixed, Screen
+#include <vector>                   // for vector

-#include "ftxui/dom/node.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/color.hpp"
+#include "ftxui/dom/flexbox_config.hpp"  // for ftxui
+#include "ftxui/dom/node.hpp"            // for Render
+#include "ftxui/screen/color.hpp"  // for Color, Color::DarkBlue, Color::Green, Color::Red

 int main(void) {
  using namespace ftxui;