whisker_css/prop/
flex.rs

1//! Flexbox properties.
2
3use crate::css::Css;
4use crate::keyword::{
5    AlignContent, AlignItems, AlignSelf, FlexDirection, FlexWrap, JustifyContent,
6};
7use crate::value::FlexBasis;
8
9impl Css {
10    /// Sets `flex-direction`. Lynx default: `row`.
11    /// <https://lynxjs.org/api/css/properties/flex-direction>
12    pub fn flex_direction(self, v: FlexDirection) -> Self {
13        self.push("flex-direction", v)
14    }
15
16    /// Sets `flex-wrap`. Lynx default: `nowrap`.
17    /// <https://lynxjs.org/api/css/properties/flex-wrap>
18    pub fn flex_wrap(self, v: FlexWrap) -> Self {
19        self.push("flex-wrap", v)
20    }
21
22    /// Sets `flex-grow`. Lynx default: `0`. Negative values are
23    /// clamped to zero.
24    /// <https://lynxjs.org/api/css/properties/flex-grow>
25    pub fn flex_grow(self, v: f32) -> Self {
26        self.push_raw("flex-grow", crate::to_css::number_to_string(v))
27    }
28
29    /// Sets `flex-shrink`. Lynx default: `1`. Negative values are
30    /// clamped to zero.
31    /// <https://lynxjs.org/api/css/properties/flex-shrink>
32    pub fn flex_shrink(self, v: f32) -> Self {
33        self.push_raw("flex-shrink", crate::to_css::number_to_string(v))
34    }
35
36    /// Sets `flex-basis`. Lynx default: `auto`.
37    /// <https://lynxjs.org/api/css/properties/flex-basis>
38    pub fn flex_basis(self, v: impl Into<FlexBasis>) -> Self {
39        self.push("flex-basis", v.into())
40    }
41
42    /// Sets `justify-content` — main-axis distribution.
43    /// <https://lynxjs.org/api/css/properties/justify-content>
44    pub fn justify_content(self, v: JustifyContent) -> Self {
45        self.push("justify-content", v)
46    }
47
48    /// Sets `align-items` — cross-axis alignment for all items.
49    /// <https://lynxjs.org/api/css/properties/align-items>
50    pub fn align_items(self, v: AlignItems) -> Self {
51        self.push("align-items", v)
52    }
53
54    /// Sets `align-self` — cross-axis alignment for this item only.
55    /// <https://lynxjs.org/api/css/properties/align-self>
56    pub fn align_self(self, v: AlignSelf) -> Self {
57        self.push("align-self", v)
58    }
59
60    /// Sets `align-content` — cross-axis distribution of wrapped lines.
61    /// <https://lynxjs.org/api/css/properties/align-content>
62    pub fn align_content(self, v: AlignContent) -> Self {
63        self.push("align-content", v)
64    }
65
66    /// Sets `order` — controls layout order among flex/grid siblings.
67    /// <https://lynxjs.org/api/css/properties/order>
68    pub fn order(self, v: i32) -> Self {
69        self.push_raw("order", v.to_string())
70    }
71}
72
73#[cfg(test)]
74mod tests {
75    use crate::ext::*;
76    use crate::keyword::*;
77    use crate::value::FlexBasis;
78    use crate::Css;
79
80    #[test]
81    fn flex_direction_and_wrap() {
82        let s = Css::new()
83            .flex_direction(FlexDirection::Column)
84            .flex_wrap(FlexWrap::Wrap);
85        assert_eq!(s.to_string(), "flex-direction: column; flex-wrap: wrap;");
86    }
87
88    #[test]
89    fn flex_grow_shrink_basis() {
90        let s = Css::new()
91            .flex_grow(1.0)
92            .flex_shrink(0.5)
93            .flex_basis(FlexBasis::Auto);
94        assert_eq!(
95            s.to_string(),
96            "flex-grow: 1; flex-shrink: 0.5; flex-basis: auto;"
97        );
98    }
99
100    #[test]
101    fn flex_basis_length_and_content() {
102        let s = Css::new().flex_basis(px(100));
103        assert_eq!(s.to_string(), "flex-basis: 100px;");
104        let s = Css::new().flex_basis(FlexBasis::Content);
105        assert_eq!(s.to_string(), "flex-basis: content;");
106    }
107
108    #[test]
109    fn alignment_set() {
110        let s = Css::new()
111            .justify_content(JustifyContent::SpaceBetween)
112            .align_items(AlignItems::Center)
113            .align_self(AlignSelf::Stretch)
114            .align_content(AlignContent::SpaceAround);
115        assert_eq!(
116            s.to_string(),
117            "justify-content: space-between; align-items: center; align-self: stretch; align-content: space-around;"
118        );
119    }
120
121    #[test]
122    fn order_negative_allowed() {
123        let s = Css::new().order(-1);
124        assert_eq!(s.to_string(), "order: -1;");
125    }
126}
whisker_css/prop/flex.rs

whisker_css/prop/
flex.rs
