This property defines how items are distributed along the container’s transversal axis and has the following attributes:flex-start, flex-end, center, baseline e stretch.
Items will be expanded to fill the entire dimension of the cross axis (height or width).
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")
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.stretch)
)
)
)
}
Items are shifted to the cross axis start:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.FLEX_START
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(300).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(200).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(150).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.flexStart)
)
)
)
}
Items are shifted to the cross axis end:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.FLEX_END
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(300).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(200).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(150).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.flexEnd)
)
)
)
}
Items are centered on the cross axis:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
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().size(Size().width(300).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(200).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(150).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.center)
)
)
)
}
Items are aligned acording to the firt text line in each element.
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.BASELINE
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(70).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(40).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(100).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.baseline)
)
)
)
}
For more information about Align Itens, 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.