Flexbox Mox Module or Flexbox is a one-dimensional layout module that offers space distribution between elements in an interface. It lets you deal with layouts in one dimension at a time (either as a row or as a column.) Unlike other CSS layout methods like positioning and floats, Flexbox makes it possible for developers to vertically centre a block of content inside the parent layout and even make all columns adopt the same height. However, like any other CSS layouts, you may find it difficult to work on Flexbox layout tasks initially. But, Flexbox Zombies can help you here. It is a fun educational game that helps you create any layout using Flexbox without wasting time looking up syntaxes or getting assignment help.
Now there are two major benefits of using Flexbox Zombies:
- Helps you get the hang of this one-dimensional layout method so that you can lay out items in rows and columns or shrink the elements to fit into smaller spaces.
- Teaches Flexbox through an engaging story where each lesson builds on the previous.
All in all, Flexbox Zombies is your go-to game if you want to get a solid grip on the fundamentals of Flexbox in a fun and effective way. So, let’s take a look at the major lessons that Flexbox Zombies teaches you:
display:flex
Purpose: Turns on the crossbow
- This makes the parent or the layout to become a flex container and its children or elements to become flex items.
- You need to type display:flex in the parent layout to activate the crossbow in the game.
flex-direction
Purpose: Aims the crossbow in an appropriate direction
- Flexbox works on the basis of two axes- the main axis and the cross axis.
- The flex-direction governs the main axis and it consists of four values:
row
row-reverse
column
column-reverse
- The cross axis is perpendicular to the main axis. If you set your flex-direction to row or row-reverse, the cross axis runs down the columns.
- However, if you set the main axis to column or column-reverse, the cross axis runs along the rows.
- This feature helps you align and justify your content along one axis or the other.
justify-content
Purpose: Lines up zombies along the red justify laser.
- This command controls how you want to adjust the items within the main axis or rather the flex-direction.
- The default is: justify-content:flex-start. Other options include centre, flex-end, space-between, space-evenly and space-around.
- It also helps you distribute extra free space when all the flex items have reached their maximum size or are inflexible.
- You can also exert some control over the alignment of elements when they tend to overflow the line.
align-items
Purpose: Lines up zombies along with the blue alignment laser.
- This one helps you decide or rather control how the items are spaced in the cross axis or the axis perpendicular to the main axis.
- The default is align-items:stretch. This lets you fill up the whole space in the alignment axis. You can replace it with other options like centre, flex-end and flex-start.
- Let’s assume you want to work on a horizontal flexbox layout. In that case, the horizontal flow is the main axis and align-items sets the alignment opposite that, on the vertical axis.
- You can consider align-items as the replacement for justify-content on the cross axis.
flex-grow
Purpose: Helps the zombies occupy more of the space.
- Flex-grow is a sub-property of the Flexible Box Layout Module.
- It defines the ability of a flex item to grow as and when required. You have to set a value that serves as a proportion. This value dictates what amount of the space the item should take up inside the flex container.
- This command determines the flex-grow factor, which is basically the ratio of how all flex items grow to fill the available spaces as the layout grows along with the main axis.
- The default is flex-grow:0. It means that the item will not grow irrespective of the growth of the parent element size.
- Let’s say an item has a flex-growth property with a value greater than 0. So, it will grow to fill all the spaces in the main axis.
align-self
Purpose: Takes care of any individual alignments that may be different from the others.
- This property is specified on the item itself, unlike all the other properties that I mentioned so far. It consists of other options such as align-items:stretch, centre, flex-start and flex-end.
- It helps you override the align-items value for certain flex items.
flex-shrink
Purpose: Shrinks the zombies when there isn’t enough space.
- This one is quite similar to flex-grow. However, the former determines the ratio with which the flex items shrink as the parent layout or container shrinks.
- The default is flex-shrink:1. However, setting the property to flex-shrink:0 will let you keep the sizes same no matter what and those will not shrink.
- You can set the items to flex-shrink:1 or flex-shrink:2. It doesn’t matter because this property uses ratios.
Wrapping Up,
Honestly, there are more to this game than just the ones I mentioned in this blog. You have to play it yourself and make the most of this fun, educational game. Flexbox is the future of CSS and is a total game-changer if you are interested in web design or app developments. Creating a flexible layout is easier, cost-effective and faster with Flexbox and Flexbox Zombies is one of the most interactive ways you can learn this CSS method. Good Luck.
Author Bio:
Olaila Lee is a web developer at a reputed firm in the United States. She also provides homework help to students at MyAssignmenthelp.com. Samantha loves to read novels whenever she is free.
Also Read:
What is Exactly Rabbit? The Top Alternative of this Video Streaming Platform
A Comprehensive Guide On iPad Air 2 Screen Replacement
