Hello Folks, don’t feel wonder while reading my first blog. More than a year I have been planning to publish a blog, but I didn’t get enough content and more than that I have a little fear of writing a blog, but I felt this is the correct time to publish one, as I feel I have a better knowledge in UI development.
This blog will be really helpful for beginners who have just started learning about CSS.
Before getting into flexbox lets have a look about CSS. We all know the use case of CSS, but here I’m going to share my understanding about it.
What are all the users seeing in webpage without CSS? It will look like a normal daily newspaper. To improve that CSS introduced color, text modal, sizes.
In CSS we use a method called FLOAT to display its items in a row. But for CSS beginners this is a little difficult. So now CSS has introduced another method called Flex Box, which is very easy for learners and involves a lot of applications. I think this method will give the CSS beginner an interest and freshness to learn.
I have started using flex-box in my all current projects and its very easy comparing to CSS float method. Bootstrap 4+ and all other popular frameworks have started using flex-box in their latest release.
Why Flexbox ?
Flexbox is an advanced CSS Layout module. CSS frameworks like Bootstrap, Semantic UI started using the flexbox layout module. Even beginners can easily learn and implement this in a short span of time.
The Flexbox Layout is also called as CSS Flexible Box Layout Module. It is a new layout module in CSS3, which is created to improve the item alignment, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.
Lets dive in and see how to use flexbox in your application.
What is Flexbox?
The Flexible layout module makes it easier to design flexible responsive layout structure without using for positioning.
- In the name itself we can understand. Flexbox is a CSS3 layout module by which we can design flexible layouts for all the devices like desktop, iPad, mobile devices. That means flex property differs a little while compared to grid CSS. Flexbox contains two axis (X, Y axis) but in Grid it contain three axes (X,Y,Z)
A CSS3 Layout mode provides an easy and clean way to arrange items within a container. A few plus points about the layout module,
- No FLOATS
- Responsive Layouts (Desktop, Tablet, Mobile)
- Positioning child element is MUCH easier
- Can change the order of child elements without editing HTML code.
- Can apply spacing, Using to Margin.
Browser Support
Don’t worry. It almost supports all modern browsers https://caniuse.com/flexbox
Flexbox properties:
The Two major categories
- Flex Containers
- Flex Items
Properties for the Parent (flex container)
flex-direction
This property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like rows horizontally or columns vertically.
If the flex-direction is row and I am working in English, then the start edge of the main axis will be on the left, the end edge on the right.
If I were to work in Arabic, then the start edge of my main axis would be on the right and the end edge on the left.
- row
- column
- row-reverse
- column-reverse
Specifies the direction of the flexible items inside a flex container
flex-wrap
The initial flex-box concept is the container to set its items in one single line. The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction in which the new lines are stacked in.
- wrap
- nowrap
- wrap reverse
Specifies whether the flex items should wrap or not if there is not enough room for them on one flex line
flex-flow
This property is a shorthand for setting the flex-direction and flex-wrap properties.
justify-content
Horizontally aligns the flex items when the items do not use all available space on the main-axis
- flex-start
- flex-end
- center
- space-around
- space-between
- space-evenly
align-items
Vertically aligns the flex items when the items do not use all available space on the cross-axis
- stretch
- flex-start
- flex-end
- center
- baseline
align-content
Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
- flex-start
- flex-end
- center
Properties for the Children (flex items)
order
Specifies the order of a flexible item relative to the rest of the flex items inside the same container
- order: <integer>;
align-self
Used on flex items. Overrides the container’s align-items property
- flex-start
- flex-end
- center
flex
A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
- flex: <integer>;
flex-grow : <number>; flex-shrink : <number>;
I hope after reading my blog, you would have gained a better knowledge about Flex box CSS. I have started to study about React now and soon you all can expect another blog from me. Thank you!!!
