Beagle v1.5 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 defines how the lines are distributed along the cross axis (vertical)and has the following attributes:flex-start, flex-end, center, space-between, space-around e stretch.
Lines are evenly distributed along the cross axis and take up all the available space:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.STRETCH
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.stretch)
)
)
)
}
Lines are distributed at the beginning of the cross axis:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.FLEX_START
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.flexStart)
)
)
)
}
Lines are distributed at the end of the cross axis
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.FLEX_END
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.flexEnd)
)
)
)
}
Lines are kept in center of the cross axis:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.CENTER
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.center)
)
)
)
}
The first line is moved to the beginning of the cross axis, and the last one to the end. The rest are evenly distributed between:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.SPACE_BETWEEN
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.spaceBetween)
)
)
)
}
Lines are evenly distributed along the cross axis. Margins are assigned equally to the left and right (or above and below, depending on the direction of the cross axis). That is why the first and last lines are not sticked to the edges
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.SPACE_AROUND
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.spaceAround)
)
)
)
}
For more information about Align Content, 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.