Justify Content
Justify Content
O justify-content define o alinhamento dos itens ao longo do eixo principal do container (horizontalmente) e tem os seguintes atributos: flex-start, flex-end, center, space-between, space-around e space-Evenly.
O tamanho do container pode interferir no comportamento dessa propriedade. Isso significa que, quando os elementos são posicionados, podem ser dispostos em uma coluna em vez de uma linha, como no exemplo abaixo.
Nesse momento, se o container não possuir uma altura suficiente para conter os elementos empilhados, essa propriedade não conseguirá mostrar os elementos em uma coluna.
Flex Start (padrão)
Os itens são alinhados a partir do início do eixo principal; alinhados em cima, no começo da tela:
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
Os itens são alinhados a partir do fim do eixo principal; alinhados em baixo, no fim da tela:
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
Os itens são alinhados ao centro do eixo principal; no centro da tela:
{% code title="" %}}
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
O primeiro item é deslocado para o início do eixo principal, o último é deslocado para o fim do eixo principal e os demais são distribuídos uniformemente; o espaço entre eles é igual:
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
Os itens são uniformemente distribuídos ao longo do eixo principal. Aqui, são atribuídas margens iguais acima e abaixo (ou à esquerda e à direita, dependendo da direção do eixo principal). Por isso o primeiro e o último item não ficam “colados” nas bordas do container:
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
Os itens são uniformemente distribuídos ao longo do eixo principal:
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)
)
)
)
}
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.