taffy/style/
flex.rs

1//! Style types for Flexbox layout
2use super::{AlignContent, AlignItems, AlignSelf, CoreStyle, Dimension, JustifyContent, LengthPercentage, Style};
3use crate::geometry::Size;
4
5/// The set of styles required for a Flexbox container
6pub trait FlexboxContainerStyle: CoreStyle {
7    /// Which direction does the main axis flow in?
8    #[inline(always)]
9    fn flex_direction(&self) -> FlexDirection {
10        Style::<Self::CustomIdent>::DEFAULT.flex_direction
11    }
12    /// Should elements wrap, or stay in a single line?
13    #[inline(always)]
14    fn flex_wrap(&self) -> FlexWrap {
15        Style::<Self::CustomIdent>::DEFAULT.flex_wrap
16    }
17
18    /// How large should the gaps between items in a grid or flex container be?
19    #[inline(always)]
20    fn gap(&self) -> Size<LengthPercentage> {
21        Style::<Self::CustomIdent>::DEFAULT.gap
22    }
23
24    // Alignment properties
25
26    /// How should content contained within this item be aligned in the cross/block axis
27    #[inline(always)]
28    fn align_content(&self) -> Option<AlignContent> {
29        Style::<Self::CustomIdent>::DEFAULT.align_content
30    }
31    /// How this node's children aligned in the cross/block axis?
32    #[inline(always)]
33    fn align_items(&self) -> Option<AlignItems> {
34        Style::<Self::CustomIdent>::DEFAULT.align_items
35    }
36    /// How this node's children should be aligned in the inline axis
37    #[inline(always)]
38    fn justify_content(&self) -> Option<JustifyContent> {
39        Style::<Self::CustomIdent>::DEFAULT.justify_content
40    }
41}
42
43/// The set of styles required for a Flexbox item (child of a Flexbox container)
44pub trait FlexboxItemStyle: CoreStyle {
45    /// Sets the initial main axis size of the item
46    #[inline(always)]
47    fn flex_basis(&self) -> Dimension {
48        Style::<Self::CustomIdent>::DEFAULT.flex_basis
49    }
50    /// The relative rate at which this item grows when it is expanding to fill space
51    #[inline(always)]
52    fn flex_grow(&self) -> f32 {
53        Style::<Self::CustomIdent>::DEFAULT.flex_grow
54    }
55    /// The relative rate at which this item shrinks when it is contracting to fit into space
56    #[inline(always)]
57    fn flex_shrink(&self) -> f32 {
58        Style::<Self::CustomIdent>::DEFAULT.flex_shrink
59    }
60
61    /// How this node should be aligned in the cross/block axis
62    /// Falls back to the parents [`AlignItems`] if not set
63    #[inline(always)]
64    fn align_self(&self) -> Option<AlignSelf> {
65        Style::<Self::CustomIdent>::DEFAULT.align_self
66    }
67}
68
69use crate::geometry::AbsoluteAxis;
70
71/// Controls whether flex items are forced onto one line or can wrap onto multiple lines.
72///
73/// Defaults to [`FlexWrap::NoWrap`]
74///
75/// [Specification](https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property)
76#[derive(Copy, Clone, PartialEq, Eq, Debug, Default)]
77#[cfg_attr(feature = "serde", derive(Serialize, Deserialize))]
78pub enum FlexWrap {
79    /// Items will not wrap and stay on a single line
80    #[default]
81    NoWrap,
82    /// Items will wrap according to this item's [`FlexDirection`]
83    Wrap,
84    /// Items will wrap in the opposite direction to this item's [`FlexDirection`]
85    WrapReverse,
86}
87
88/// The direction of the flexbox layout main axis.
89///
90/// There are always two perpendicular layout axes: main (or primary) and cross (or secondary).
91/// Adding items will cause them to be positioned adjacent to each other along the main axis.
92/// By varying this value throughout your tree, you can create complex axis-aligned layouts.
93///
94/// Items are always aligned relative to the cross axis, and justified relative to the main axis.
95///
96/// The default behavior is [`FlexDirection::Row`].
97///
98/// [Specification](https://www.w3.org/TR/css-flexbox-1/#flex-direction-property)
99#[derive(Copy, Clone, PartialEq, Eq, Debug, Default)]
100#[cfg_attr(feature = "serde", derive(Serialize, Deserialize))]
101pub enum FlexDirection {
102    /// Defines +x as the main axis
103    ///
104    /// Items will be added from left to right in a row.
105    #[default]
106    Row,
107    /// Defines +y as the main axis
108    ///
109    /// Items will be added from top to bottom in a column.
110    Column,
111    /// Defines -x as the main axis
112    ///
113    /// Items will be added from right to left in a row.
114    RowReverse,
115    /// Defines -y as the main axis
116    ///
117    /// Items will be added from bottom to top in a column.
118    ColumnReverse,
119}
120
121impl FlexDirection {
122    #[inline]
123    /// Is the direction [`FlexDirection::Row`] or [`FlexDirection::RowReverse`]?
124    pub(crate) fn is_row(self) -> bool {
125        matches!(self, Self::Row | Self::RowReverse)
126    }
127
128    #[inline]
129    /// Is the direction [`FlexDirection::Column`] or [`FlexDirection::ColumnReverse`]?
130    pub(crate) fn is_column(self) -> bool {
131        matches!(self, Self::Column | Self::ColumnReverse)
132    }
133
134    #[inline]
135    /// Is the direction [`FlexDirection::RowReverse`] or [`FlexDirection::ColumnReverse`]?
136    pub(crate) fn is_reverse(self) -> bool {
137        matches!(self, Self::RowReverse | Self::ColumnReverse)
138    }
139
140    #[inline]
141    /// The `AbsoluteAxis` that corresponds to the main axis
142    pub(crate) fn main_axis(self) -> AbsoluteAxis {
143        match self {
144            Self::Row | Self::RowReverse => AbsoluteAxis::Horizontal,
145            Self::Column | Self::ColumnReverse => AbsoluteAxis::Vertical,
146        }
147    }
148
149    #[inline]
150    /// The `AbsoluteAxis` that corresponds to the cross axis
151    pub(crate) fn cross_axis(self) -> AbsoluteAxis {
152        match self {
153            Self::Row | Self::RowReverse => AbsoluteAxis::Vertical,
154            Self::Column | Self::ColumnReverse => AbsoluteAxis::Horizontal,
155        }
156    }
157}
158
159#[cfg(test)]
160mod tests {
161    mod test_flex_direction {
162        use crate::style::*;
163
164        #[test]
165        fn flex_direction_is_row() {
166            assert!(FlexDirection::Row.is_row());
167            assert!(FlexDirection::RowReverse.is_row());
168            assert!(!FlexDirection::Column.is_row());
169            assert!(!FlexDirection::ColumnReverse.is_row());
170        }
171
172        #[test]
173        fn flex_direction_is_column() {
174            assert!(!FlexDirection::Row.is_column());
175            assert!(!FlexDirection::RowReverse.is_column());
176            assert!(FlexDirection::Column.is_column());
177            assert!(FlexDirection::ColumnReverse.is_column());
178        }
179
180        #[test]
181        fn flex_direction_is_reverse() {
182            assert!(!FlexDirection::Row.is_reverse());
183            assert!(FlexDirection::RowReverse.is_reverse());
184            assert!(!FlexDirection::Column.is_reverse());
185            assert!(FlexDirection::ColumnReverse.is_reverse());
186        }
187    }
188}
taffy/style/flex.rs

taffy/style/
flex.rs
