# godot-flexbox

**Repository Path**: component/godot-flexbox

## Basic Information

- **Project Name**: godot-flexbox
- **Description**: 在godot中使用flexbox方式进行ui布局
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: godot-4.x
- **Homepage**: https://github.com/citizenll/godot-flexbox
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-03-07
- **Last Updated**: 2025-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Godot Flexbox Layout

<p align="center">
    <img src="./docs/flex-container.gif" alt="flex-container-demo"/>
</p>

<p align="center">
    Flexbox layout for Godot Engine 
</p>

## New version2.0!
Godot4.1 New Version Support, Enhanced User Experience, Just Like Native Components.

## Work in Progress 🧑‍💻
🎉 Support 4.1 now !

|  Old Version 	| Link                                                               	|
|----------------	|--------------------------------------------------------------------	|
| Godot 4.0            	| [Click Here ✔️](https://github.com/citizenll/godot-flexbox/tree/4.0)  	|
| Godot 3.5            	| [Click Here ✔️](https://github.com/citizenll/godot-flexbox/tree/main) 	|

This is a work in progress. It can be used with basic functionality, and has been tested on Windows and Android.

### Learn About Flexbox
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Flexbox Froggy](https://flexboxfroggy.com/)

## Getting Started
### Installation
- Get the latest release from the Godot Asset Library [here](https://godotengine.org/asset-library/asset/1811)
- Clone the repository and copy the `addons` folder into your project

### Usage
- Add the `FlexContainer` node to your scene
<p align="center">
    <img src="./docs/add-flex-container.png" alt="flex-container-demo"/>
</p>

- Change the `FlexDirection` property in the inspector, and you will see the layout change. You can also change the child properties in the child inspector.

![inspector](./docs/flex-container-property.png)![inspector](./docs/flex-child-property.png)


## 

## License
![](https://img.shields.io/badge/license-MIT-green)