implement `direction` property
1//! Style types for controlling alignment
2
3/// Used to control how child nodes are aligned.
4/// For Flexbox it controls alignment in the cross axis
5/// For Grid it controls alignment in the block axis
6///
7/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
8#[derive(Copy, Clone, PartialEq, Eq, Debug)]
9#[cfg_attr(feature = "serde", derive(Serialize, Deserialize))]
10pub enum AlignItems {
11 /// Items are packed toward the start of the axis
12 Start,
13 /// Items are packed toward the end of the axis
14 End,
15 /// Items are packed towards the flex-relative start of the axis.
16 ///
17 /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
18 /// to End. In all other cases it is equivalent to Start.
19 FlexStart,
20 /// Items are packed towards the flex-relative end of the axis.
21 ///
22 /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
23 /// to Start. In all other cases it is equivalent to End.
24 FlexEnd,
25 /// Items are packed along the center of the cross axis
26 Center,
27 /// Items are aligned such as their baselines align
28 Baseline,
29 /// Stretch to fill the container
30 Stretch,
31}
32
33impl AlignItems {
34 /// Flips the alignment value for the given direction
35 #[inline]
36 pub fn flip(&mut self) {
37 *self = match self {
38 Self::Start => Self::End,
39 Self::End => Self::Start,
40 Self::FlexStart => Self::FlexEnd,
41 Self::FlexEnd => Self::FlexStart,
42 _ => return,
43 }
44 }
45}
46
47/// Used to control how child nodes are aligned.
48/// Does not apply to Flexbox, and will be ignored if specified on a flex container
49/// For Grid it controls alignment in the inline axis
50///
51/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
52pub type JustifyItems = AlignItems;
53/// Controls alignment of an individual node
54///
55/// Overrides the parent Node's `AlignItems` property.
56/// For Flexbox it controls alignment in the cross axis
57/// For Grid it controls alignment in the block axis
58///
59/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
60pub type AlignSelf = AlignItems;
61/// Controls alignment of an individual node
62///
63/// Overrides the parent Node's `JustifyItems` property.
64/// Does not apply to Flexbox, and will be ignored if specified on a flex child
65/// For Grid it controls alignment in the inline axis
66///
67/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
68pub type JustifySelf = AlignItems;
69
70/// Sets the distribution of space between and around content items
71/// For Flexbox it controls alignment in the cross axis
72/// For Grid it controls alignment in the block axis
73///
74/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
75#[derive(Copy, Clone, PartialEq, Eq, Debug)]
76#[cfg_attr(feature = "serde", derive(Serialize, Deserialize))]
77pub enum AlignContent {
78 /// Items are packed toward the start of the axis
79 Start,
80 /// Items are packed toward the end of the axis
81 End,
82 /// Items are packed towards the flex-relative start of the axis.
83 ///
84 /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
85 /// to End. In all other cases it is equivalent to Start.
86 FlexStart,
87 /// Items are packed towards the flex-relative end of the axis.
88 ///
89 /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
90 /// to Start. In all other cases it is equivalent to End.
91 FlexEnd,
92 /// Items are centered around the middle of the axis
93 Center,
94 /// Items are stretched to fill the container
95 Stretch,
96 /// The first and last items are aligned flush with the edges of the container (no gap)
97 /// The gap between items is distributed evenly.
98 SpaceBetween,
99 /// The gap between the first and last items is exactly THE SAME as the gap between items.
100 /// The gaps are distributed evenly
101 SpaceEvenly,
102 /// The gap between the first and last items is exactly HALF the gap between items.
103 /// The gaps are distributed evenly in proportion to these ratios.
104 SpaceAround,
105}
106
107/// Sets the distribution of space between and around content items
108/// For Flexbox it controls alignment in the main axis
109/// For Grid it controls alignment in the inline axis
110///
111/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
112pub type JustifyContent = AlignContent;
113
114impl AlignContent {
115 /// Flips the alignment value for the given direction
116 #[inline]
117 pub fn flip(&mut self) {
118 *self = match self {
119 Self::Start => Self::End,
120 Self::End => Self::Start,
121 Self::FlexStart => Self::FlexEnd,
122 Self::FlexEnd => Self::FlexStart,
123 _ => return,
124 }
125 }
126}