Flexbox Component

What is a flexbox?

A flexbox is a container that holds components together for the sake of usability. In a user interface, a flexbox often serves to group related components in a neat and orderly way.

Without a container, app design can spill over into other margins, or generally appear unorganized. Containers as a whole solve this problem by specifying container dimensions, and allowing the content within the container to be displayed consistently in a predetermined manner.

Basic flexbox concepts

A flexbox component in an Internal application

Remember, a flexbox itself is a wrapper for components. It allows several ways of organizing components. Basic CSS offers several flex-direction values to choose from:

  • Row displays the components in order from left to right.

  • Row reverse displays the components in order from right to left.

  • Column displays the components in order from top to bottom.

  • Column reverse displays the components in order from bottom to top

.Flexboxes also allow for additional CSS like padding, wrapping, growing, and shrinking, to further customize the way components are displayed.

Internal flexbox components

In Internal, any connected data source automatically generates numerous components to use in your workspace, including flexboxes.

After dragging and dropping a flexbox into a space, other components can be dragged into it and arranged a number of ways. From a dropdown menu, users can choose flex direction (row and column), spacing, padding, and so on. It’s a remarkably fast and easy way to group components, so that users don’t have to write CSS every time they want to group components together within a workspace.

Check out the Internal flexbox component documentation for more information, or help with creating your own.

Resources:

Mozilla: Flexbox fundamentals

W3 Schools: CSS Flexboxes