Justify Content
Here, you’ll find lists' information about the Justify Content property
Justify Content
Justify-content defines the alignment of items along the main axis (horizontally) and has the following attributes:flex-start, flex-end, center, space-between, space-around and space-Evenly.
The size of a container can interfere on this property behaviour. When the elements are positioned, they can be set in a column instead of a line, like the example below. If the container does not have enough height to contain all the stacked elements, this property won’t be able to show the element in a column.
Flex Start (Default)
Items are aligned at the beginning of the main axis; lined up at the screen top:
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.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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(0)
.justifyContent(.flexStart)
)
)
)
}
Flex End
Items are aligned from the end of the main axis; aligned below, at the screen’s bottom:
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.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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(0)
.justifyContent(.flexEnd)
)
)
)
}
Center
Items are aligned at the center of the main axis; in the center of the screen:
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.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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(0)
.justifyContent(.center)
)
)
)
}
Space Between
The first item is moved to the main axis start, the last one is moved to the main axis end and the rest are evenly distributed making the space between them equal:
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_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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(0)
.justifyContent(.spaceBetween)
)
)
)
}
Space Around
Items are evenly distributed along the main axis. Equal margins are assigned at main axis start and end (or left and right, depending on the direction of the main axis). For this reason, the first and last items 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")
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(0)
.justifyContent(.spaceAround)
)
)
)
}
Space Evenly
Items are evenly distributed along the main 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")
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
}
}
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(0)
.justifyContent(.spaceEvenly)
)
)
)
}
For more information about Justify Content, check out the Yoga Layout documentation.
Feedback
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.
Last modified June 21, 2021: Fix/flex images v1.8 (#647) (38bb7247)