FTXUI  5.0.0
C++ functional terminal UI.
flexbox_config.hpp
Go to the documentation of this file.
1 // Copyright 2021 Arthur Sonzogni. All rights reserved.
2 // Use of this source code is governed by the MIT license that can be found in
3 // the LICENSE file.
4 #ifndef FTXUI_DOM_FLEXBOX_CONFIG_HPP
5 #define FTXUI_DOM_FLEXBOX_CONFIG_HPP
6 
7 /*
8  This replicate the CSS flexbox model.
9  See guide for documentation:
10  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
11 */
12 
13 namespace ftxui {
14 
15 struct FlexboxConfig {
16  /// This establishes the main-axis, thus defining the direction flex items are
17  /// placed in the flex container. Flexbox is (aside wrapping) single-direction
18  /// layout concept. Think of flex items as primarily laying out either in
19  /// horizontal rows or vertical columns.
20  enum class Direction {
21  Row, ///< Flex items are laid out in a row.
22  RowInversed, ///< Flex items are laid out in a row, but in reverse order.
23  Column, ///< Flex items are laid out in a column.
24  ColumnInversed ///< Flex items are laid out in a column, but in reverse
25  ///< order.
26  };
28 
29  /// By default, flex items will all try to fit onto one line. You can change
30  /// that and allow the items to wrap as needed with this property.
31  enum class Wrap {
32  NoWrap, ///< Flex items will all try to fit onto one line.
33  Wrap, ///< Flex items will wrap onto multiple lines.
34  WrapInversed, ///< Flex items will wrap onto multiple lines, but in reverse
35  ///< order.
36  };
38 
39  /// This defines the alignment along the main axis. It helps distribute extra
40  /// free space leftover when either all the flex items on a line are
41  /// inflexible, or are flexible but have reached their maximum size. It also
42  /// exerts some control over the alignment of items when they overflow the
43  /// line.
44  enum class JustifyContent {
45  /// Items are aligned to the start of flexbox's direction.
46  FlexStart,
47  /// Items are aligned to the end of flexbox's direction.
48  FlexEnd,
49  /// Items are centered along the line.
50  Center,
51  /// Items are stretched to fill the line.
52  Stretch,
53  /// Items are evenly distributed in the line; first item is on the start
54  // line, last item on the end line
56  /// Items are evenly distributed in the line with equal space around them.
57  /// Note that visually the spaces aren’t equal, since all the items have
58  /// equal space on both sides. The first item will have one unit of space
59  /// against the container edge, but two units of space between the next item
60  /// because that next item has its own spacing that applies.
62  /// Items are distributed so that the spacing between any two items (and the
63  /// space to the edges) is equal.
65  };
67 
68  /// This defines the default behavior for how flex items are laid out along
69  /// the cross axis on the current line. Think of it as the justify-content
70  /// version for the cross-axis (perpendicular to the main-axis).
71  enum class AlignItems {
72  FlexStart, ///< items are placed at the start of the cross axis.
73  FlexEnd, ///< items are placed at the end of the cross axis.
74  Center, ///< items are centered along the cross axis.
75  Stretch, ///< items are stretched to fill the cross axis.
76  };
78 
79  // This aligns a flex container’s lines within when there is extra space in
80  // the cross-axis, similar to how justify-content aligns individual items
81  // within the main-axis.
82  enum class AlignContent {
83  FlexStart, ///< items are placed at the start of the cross axis.
84  FlexEnd, ///< items are placed at the end of the cross axis.
85  Center, ///< items are centered along the cross axis.
86  Stretch, ///< items are stretched to fill the cross axis.
87  SpaceBetween, ///< items are evenly distributed in the cross axis.
88  SpaceAround, ///< tems evenly distributed with equal space around each
89  ///< line.
90  SpaceEvenly, ///< items are evenly distributed in the cross axis with equal
91  ///< space around them.
92  };
94 
95  int gap_x = 0;
96  int gap_y = 0;
97 
98  // Constructor pattern. For chained use like:
99  // ```
100  // FlexboxConfig()
101  // .Set(FlexboxConfig::Direction::Row)
102  // .Set(FlexboxConfig::Wrap::Wrap);
103  // ```
109  FlexboxConfig& SetGap(int gap_x, int gap_y);
110 };
111 
112 } // namespace ftxui
113 
114 #endif // FTXUI_DOM_FLEXBOX_CONFIG_HPP
AlignContent align_content
@ Center
items are centered along the cross axis.
@ FlexStart
items are placed at the start of the cross axis.
@ FlexEnd
items are placed at the end of the cross axis.
@ SpaceBetween
items are evenly distributed in the cross axis.
@ Stretch
items are stretched to fill the cross axis.
@ Column
Flex items are laid out in a column.
@ Row
Flex items are laid out in a row.
@ RowInversed
Flex items are laid out in a row, but in reverse order.
@ NoWrap
Flex items will all try to fit onto one line.
@ Wrap
Flex items will wrap onto multiple lines.
@ Center
items are centered along the cross axis.
@ FlexStart
items are placed at the start of the cross axis.
@ FlexEnd
items are placed at the end of the cross axis.
@ Stretch
items are stretched to fill the cross axis.
FlexboxConfig & SetGap(int gap_x, int gap_y)
Set the flexbox flex direction.
JustifyContent justify_content
@ Center
Items are centered along the line.
@ FlexStart
Items are aligned to the start of flexbox's direction.
@ FlexEnd
Items are aligned to the end of flexbox's direction.
@ SpaceBetween
Items are evenly distributed in the line; first item is on the start.
@ Stretch
Items are stretched to fill the line.
FlexboxConfig & Set(FlexboxConfig::Direction)
Set the flexbox direction.