Container Flexbox Settings

Community How-to
1

Would someone in the community (or even Sitejet helpdesk) please be so kind to explain these settings of Flexbox Container to me/us? Best would be a short Loom video.

In every project I struggle with these settings because - as a non coder - I do not understand what it does exactly. Thank you so much in advance!

image|328x355

2

Hi @Barbara_Bichler, I hope this will help you to understand Flexbox Settings.

Flexbox Settings Explained

Flexbox is a CSS layout module that allows elements to be easily aligned and distributed within a container. Here are some key concepts and settings to understand:

  1. Creating a Flex Container
  • Set the display property of the container to flex or inline-flex.
  • This makes the container a flex container and its direct children become flex items.
  1. Flex Direction
  • The flex-direction property determines the direction in which flex items are laid out.
  • Possible values: row (default), row-reverse, column, column-reverse.
  1. Flex Items Alignment
  • The justify-content property aligns flex items along the main axis.
  • Possible values: flex-start, flex-end, center, space-between, space-around.
  • The align-items property aligns flex items along the cross axis.
  • Possible values: flex-start, flex-end, center, stretch, baseline.
  1. Flex Items Order
  • The order property allows you to change the order of flex items.
  • By default, flex items have an order of 0.
  1. Flex Items Growth and Shrinking
  • The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
  • The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
  1. Flex Items Basis
  • The flex-basis property sets the initial size of a flex item before any available space is distributed.
  • It can be a length (e.g., 200px), a percentage (e.g., 50%), or auto (default).

Here are some examples:

3

Thanks.

But could you also explain within Sitejet what these settings does, please? Just by using a flexbox-based preset in Sitejet and showing what exactly happens and what needs to be typed into the blank fields.

I wonder if it is just me struggeling or if other people here have problems to understand how it works within Sitejet.

4

Hi @Barbara_Bichler,

please open the links from my last post and go through the examples. You need to understand the concept of flexbox settings and then you will understand it in Sitejet, because this is a general concept of how modules are arranged.

You can also try this game to learn how flexbox works: https://flexboxfroggy.com/

5

I love that froggy game :slight_smile:

6

This was awesome! Thank you!

1 Like