godot-flexbox - GitLite

KO | EN

gitlite — search

#typescript #go #golang #android #rust #linux #docker #kubernetes #vue #security #ios #mcp #openai #open-source

godot-flexbox

(★ 192)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - builds.yml
- - assets.gd
  - flex_container.gd
  - flexbox.gdextension
  - icon.svg
  - icon.svg.import
  - plugin.cfg
  - plugin.gd
  - toolbar.gd
- .gitkeep
- api_test.gd
- api_test.tscn
- ColorRect1.gd
- default_env.tres
- export_presets.cfg
- playground.gd
- playground.tscn
- project.godot
- setup.bat
- setup.sh
- add-flex-container.png
- add-flex-container.png.import
- flex-child-property.png
- flex-child-property.png.import
- flex-container-overview.png
- flex-container-overview.png.import
- flex-container-property.png
- flex-container-property.png.import
- flex-container.gif
- flexbox-assets-icon.png
- flexbox-assets-icon.png.import
- - BitUtils.h
  - CompactValue.h
  - LICENSE
  - log.cpp
  - log.h
  - Utils.cpp
  - Utils.h
  - YGConfig.cpp
  - YGConfig.h
  - YGEnums.cpp
  - YGEnums.h
  - YGFloatOptional.h
  - YGLayout.cpp
  - YGLayout.h
  - YGMacros.h
  - YGNode.cpp
  - YGNode.h
  - YGNodePrint.cpp
  - YGNodePrint.h
  - YGStyle.cpp
  - YGStyle.h
  - YGValue.cpp
  - YGValue.h
  - Yoga-internal.h
  - Yoga.cpp
  - Yoga.h
- flexbox.cpp
- flexbox.h
- register_types.cpp
- register_types.h
.editorconfig
.gitattributes
.gitignore
.gitmodules
.pre-commit-config.yaml
build.py
clean.py
godot-cpp
icon.png
icon.png.import
LICENSE.md
methods.py
README.md
SConstruct

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://raw.githubusercontent.com/citizenll/godot-flexbox/godot-4.x/docs/flex-container-property.png)![inspector](https://raw.githubusercontent.com/citizenll/godot-flexbox/godot-4.x/docs/flex-child-property.png)

##

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