What is the method for automatic alignment in HBuilder?

1 year ago

Liam

1 minute

In HBuilder, you can use the justify-content property of Flexbox layout to achieve automatic alignment. Here are some commonly used values of justify-content property to achieve automatic alignment effects:

flex-start: 左对齐

flex-end: 右对齐

center: 居中对齐

space-between: 均匀分布在容器内，首尾不留空白

space-around: 均匀分布在容器内，首尾留有空白

space-evenly: 均匀分布在容器内，包括首尾

Here is an example demonstrating how to achieve automatic alignment using the justify-content property in HBuilder.

<div style="display: flex; justify-content: center;">
    <div>元素1</div>
    <div>元素2</div>
    <div>元素3</div>
</div>

In the provided code, the parent

is set with display: flex; justify-content: center;, causing the child

to automatically align horizontally center.

You can choose the appropriate justify-content property value based on your specific needs to achieve automatic alignment effects.