Introduction
CSS Flexbox is a CSS web layout model which allows responsive elements within a container to be automatically arranged depending on viewport size.
There are really two major parts of the flexbox we need to concern:
- Flexbox Container
- Flexbox Item
Flexbox Container
A flexbox or simply flex-container is the parent object and contains flex items.
We can define attributes on the Flexbox container to define direction and layout of the container.
Flex Items
Flex-items are primary objects within flex-containers.
The object can be a variety of HTML objects like images, text, form and more; but only the primary object, get affected not the nested children’s of the flex-items.
We can set properties on flex-container that directly affect flex-items.
We also adjust specific properties and attributes on flex-items that only affects the flex-items and not the flex-container.
The direction of the container are defined on the parent, will directly affect what can we do to the flex-items.
More on Flex Containers
Its the parent of flex items.
The children can be laid out in either the
- horizontal (row)
- vertical (column)
directions and even can flex their size.
We can nest flex-containers within other flex-item to get more complex layouts within our web-pages.
CSS flexbox makes it easier for us to distribute space and align content to make webpages responsive easily. This helps adopt and change content based off the screen-size so that user sees the best layout for whatever size they may be on.
One key part working with flex-containers is defining how the contents will be stacked; we do that by defining flex-direction.
flex-direction
The direction defines how the items will be laid out within the container.
Two available options are row or column. Default is row.
Breaking Design to flex boxes
A simple approach as follows
- Look at entire page.
- See how many children stack.
- Start breaking down each row and column.
- Stop when you can’t break it down to stacks.
Examples
Initial Markup
To start, we have following markup and css classes
which results the following presentation
Apply Flex Box
Let set display CSS property to flex and check its effect
As you can see that flex-items are laid out in horizontal direction (we can change it to column if want to).
Lets update CSS a bit more
Now contents are justified differently on the screen. You can now set it to different value to see its effect.
You can also check different setting this link https://tburleson-layouts-demos.firebaseapp.com/
Summary
In this post, we covered the basics of flex-box, a CSS web layout model, which allows responsive elements within a container to be automatically arranged depending on viewport size and can help us with the designing layouts of our web-pages with ease.