Giter Club home page Giter Club logo

flex's Introduction

flex

flex is a flexible box layout system following the CSS flexbox module specifications. The goal is to offer a fully compliant implementation with a small and maintainable code base under a permissive license.

flex exposes a plain C API with the same parameters that you would use in CSS to customize the layout of a flexible view hierarchy. The API is designed to be easily interoperable with foreign runtimes (ex. C#) and meant to be used by widget toolkits as the foundation of a view layout API.

flex supports both single and multiple (wrap) lines layouts.

Getting Started

If you program in C# you can go straight to the bindings/csharp directory.

If you program in a C-compatible environment you can simply copy the flex.c and flex.h files to your project. The code was written to be cross-platform and does not require dependencies.

On a Mac you can also generate static and dynamic libraries for iOS, Android and macOS using make:

$ make macos
$ make ios
$ make android
$ make             # builds everything

Make sure to have the ANDROID_NDK environment variable set to the path where the Android NDK is located in your system. You can also tweak build variables by editing the Makefile file.

On a Windows machine you can generate dynamic libraires (DLL) for x86, x64, ARM and ARM64 by opening the Visual Studio project file or running msbuild from the command line.

Demo App

Under the demo directory you will find an Xcode project that will build a Mac demo app. The app exposes the entire set of flexbox parameters that are implemented and lets you create views (including nested ones), similar to how you would build a more realistic user interface in practice.

Implementation Status

Attribute Status
width, height ๐Ÿ†—
self_sizing ๐Ÿ†—
padding ๐Ÿ†—
margin ๐Ÿ†—
justify_content flex_start ๐Ÿ†—
justify_content flex_end ๐Ÿ†—
justify_content center ๐Ÿ†—
justify_content space_around ๐Ÿ†—
justify_content space_between ๐Ÿ†—
justify_content space_evenly ๐Ÿ†—
align_content flex_start ๐Ÿ†—
align_content flex_end ๐Ÿ†—
align_content center ๐Ÿ†—
align_content space_around ๐Ÿ†—
align_content space_between ๐Ÿ†—
align_content space_evenly ๐Ÿ†—
align_content stretch ๐Ÿ†—
align_items flex_start ๐Ÿ†—
align_items flex_end ๐Ÿ†—
align_items center ๐Ÿ†—
align_items stretch ๐Ÿ†—
align_self flex_start ๐Ÿ†—
align_self flex_end ๐Ÿ†—
align_self center ๐Ÿ†—
align_self stretch ๐Ÿ†—
position relative ๐Ÿ†—
position absolute ๐Ÿ†—
direction column ๐Ÿ†—
direction column_reverse ๐Ÿ†—
direction row ๐Ÿ†—
direction row_reverse ๐Ÿ†—
wrap no_wrap ๐Ÿ†—
wrap wrap ๐Ÿ†—
wrap wrap_reverse ๐Ÿ†—
grow ๐Ÿ†—
shrink ๐Ÿ†—
order ๐Ÿ†—
basis ๐Ÿ†—

Tests

There is a test suite in the tests directory. See the tests/README.md file for more details on how to build, run and contribute to the test suite.

License

flex is distributed under the terms of the MIT license. See the LICENSE.txt file for more information.

flex's People

Contributors

lrz avatar rmarinho avatar joelmartinez avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.