Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/citizenll/godot-flexbox

Flexible and efficient UI layout using Flexbox via Yoga for Godot. ⚡
https://github.com/citizenll/godot-flexbox

addons container flexbox gdnative godot godot-addons godot-engine godot4 gui layout ui yoga

Last synced: 1 day ago
JSON representation

Flexible and efficient UI layout using Flexbox via Yoga for Godot. ⚡

Awesome Lists containing this project

README

        

# Godot Flexbox Layout


flex-container-demo


Flexbox layout for Godot Engine

## 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


flex-container-demo

- 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)