KontraKontra
    DocumentationAbout
Docs
  • Getting Started
  • Installation
  • Hello World
  • Ansi
  • Todo App
  • Event Handling
  • Style Builder
  • Components
  • Border
  • Button
  • Checkbox
  • Flex
  • Input
  • List
  • Radio Buttons
  • Tabs
  • Text
CheckboxInput
KontraKontra

Flex

The Flex layout is one of the most powerful containers in Kontra TUI. It allows you to arrange components in a row or column, distributing space evenly among them.

If you're familiar with CSS Flexbox-you're going to feel right at home.


Basic Usage

A Flex container takes a direction (Row or Column) and one or more children. It automatically divides the available space equally between them.


Options & Tweaks

The Flex component comes with a few helpful methods to customize layout behavior.

Direction

  • FlexDirection::Row- Arrange children side by side (left to right)
  • FlexDirection::Column- Stack children vertically (top to bottom)

Spacing

  • .set_gap(n)- Adds horizontal or vertical spacing between children, depending on layout direction.

Creating Children

Let's create three simple Text components with colored backgrounds so we can clearly visualize the layout behavior.


➡️ Horizontal Layout

Let's use a Row layout to place these side-by-side.

This will distribute the terminal's width into three equal panels with a gap of 5 columns in between.


⬇️ Vertical Layout

Let's stack the same components vertically.


Nesting Flex Layouts

Layouts can be nested. For example, you can stack a row and column layout together like this:


🖥️ Rendering to Screen

Finally, render your layout using the Screen component:


Output

Flex Example

Code for it,


TL;DR

  • Use FlexDirection::Row or FlexDirection::Column to control direction.
  • All children share space equally by default.
  • Add spacing with .set_gap(n).
  • Layouts can be nested for more complex UIs.
  • Great for building dashboards, split views, or structured UIs in terminal.

  auto layout = std::make_shared<Flex>(
      FlexDirection::Row, // or FlexDirection::Column
      child1,
      child2,
      ...
  );


  flex->set_gap(2); // Adds 2 columns or 2 rows of space between children


  auto text1 = std::make_shared<Text>("Panel 1", TextStyle("", ansi::BG_RED));
  auto text2 = std::make_shared<Text>("Panel 2", TextStyle("", ansi::BG_GREEN));
  auto text3 = std::make_shared<Text>("Panel 3", TextStyle("", ansi::BG_BLUE));


  auto flex_row = std::make_shared<Flex>(
      FlexDirection::Row,
      text1,
      text2,
      text3
  );
  flex_row->set_gap(5);


  auto flex_column = std::make_shared<Flex>(
      FlexDirection::Column,
      text1,
      text2,
      text3
  );
  flex_column->set_gap(1);


  auto main_layout = std::make_shared<Flex>(
      FlexDirection::Column,
      flex_row,
      flex_column
  );


  auto screen = std::make_shared<Screen>(main_layout);

  kontra::run(screen, [&](const InputEvent& event) {
  // Static example, no input needed.
  });


  #include "../include/kontra.hpp"
  int main() {
  auto panel1 = std::make_shared<Text>("Panel 1", TextStyle(ansi::FG_RED));
  auto panel2 = std::make_shared<Text>("Panel 2", TextStyle(ansi::FG_GREEN));
  auto panel3 = std::make_shared<Text>("Panel 3", TextStyle(ansi::FG_BLUE));

      auto flex_row = std::make_shared<Flex>(FlexDirection::Row, panel1, panel2, panel3);
      flex_row->set_gap(5);

      auto bordered_row_example = std::make_shared<Border>(
          flex_row,
          BorderStyleBuilder().set_title("FlexDirection::Row").set_color(ansi::FG_CYAN).build()
      );
      bordered_row_example->set_padding(1);

      auto panel4 = std::make_shared<Text>("Panel 1", TextStyle(ansi::FG_RED));
      auto panel5 = std::make_shared<Text>("Panel 2", TextStyle(ansi::FG_GREEN));
      auto panel6 = std::make_shared<Text>("Panel 3", TextStyle(ansi::FG_BLUE));

      auto flex_column = std::make_shared<Flex>(FlexDirection::Column, panel4, panel5, panel6);
      flex_column->set_gap(1);

      auto bordered_column_example = std::make_shared<Border>(
          flex_column,
          BorderStyleBuilder().set_title("FlexDirection::Column").set_color(ansi::FG_YELLOW).build()
      );
      bordered_column_example->set_padding(1);

      auto main_layout = std::make_shared<Flex>(
          FlexDirection::Column,
          bordered_row_example,
          bordered_column_example
      );

      auto screen = std::make_shared<Screen>(main_layout);

      kontra::run(screen, [&](const InputEvent& event) {
        // Static example, no input needed.
      });

      return 0;
  }