Beagle v1.6 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
This property will override the behavior defined by the align-items property. It has the following attributes: flex-start, flex-end, center, auto, baseline and stretch.
Each number above represents one property:
1 = auto: Will follow positioning set by the align-items property;
2 = stretch: Items will streach until the fill the whole cross axis;
3 = flex-start: Items displays at the cross axis begining;
4 = flex-end: Items displays at the cross axis end;
5 = center: Items displays at the cross axis center;
6 = baseline: Items are aligned acording to the firt text line in each element..
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
flex = Flex(alignSelf = AlignSelf.AUTO)
),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
flex = Flex(alignSelf = AlignSelf.STRETCH)
),
createText(backgroundColor = "#649d66", text = "3").applyFlex(
flex = Flex(alignSelf = AlignSelf.FLEX_START)
),
createText(backgroundColor = "#dd7631", text = "4").applyFlex(
flex = Flex(alignSelf = AlignSelf.FLEX_END)
),
createText(backgroundColor = "#649d66", text = "5").applyFlex(
flex = Flex(alignSelf = AlignSelf.CENTER)
),
createText(backgroundColor = "#dd7631", text = "6").applyFlex(
flex = Flex(alignSelf = AlignSelf.BASELINE)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.CENTER
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().alignSelf(.auto)),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().alignSelf(.stretch)),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().alignSelf(.flexStart)),
createText(backgroundColor: "#142850",text: "4").applyFlex(
Flex().alignSelf(.flexEnd)),
createText(backgroundColor: "#dd7631",text: "5").applyFlex(
Flex().alignSelf(.center)),
createText(backgroundColor: "#649d66",text: "6").applyFlex(
Flex().alignSelf(.baseline)),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.center)
)
)
)
}
For more information about Align Self, check out the Yoga Layout documentation.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.