With CSS do you know how to make a block level element into an inline element? Which property are you using to do so? If you’ll do that float, believe me when I tell you are doing it wrong. With what we’ll be discussing here you’ll never ever need that float thing again. In this blog we’ll be looking at one most useful property when it comes to aligning or positioning an element i.e., display:flex;
But firstly, let’s take a look at
What are the inline and block level elements?
An element taking full width or 100% width as per the width of parent is a block level element; they always start with a new line and two block level elements can’t be placed in the same line unless we apply some CSS property to it. Like div, p etc. Block level elements also have top and bottom margin.
An inline element is an element which only takes the space required to fit in the child element; they do not start with a new line. Like span, button, a etc. They do not have top and bottom margin.
Note: An inline element can be converted into a block level element by adding appropriate CSS property and vice versa.
Why not use Float Property in layouts?
The main purpose of using float is to shit the elements either side and is only limited to that whereas flexbox does just that and go way beyond that. So, I guess there is no reason to use float anymore. Simply put float is never meant to be used as a property to create layouts.
Now let’s see how to use the flex property we will start with flex itself since it has two different variants
Flex Property
Basically, what flex does is it will make all the elements inline when applied to the parent of that element. Now as said there are two different flex property that can be applied here first is display:flex; and other display:inline-flex; they both have same effect on the child but work different to the element it is applied to. Flex will make the parent element a block level element whereas the inline-flex will make the parent an inline element as well.
Without any flex property
/* style used for parent element throughout the article it will not be listed after this consider it there!*/
.parent {
padding: 10px;
border: 1px solid #111111;
height: 300px;
}
/* style used for child elements throughout the article */
.child {
text-align: center;
padding: 10px;
border: 1px solid #111;
background-color: #ff5d5d;
margin: 5px;
}
.parent {
display: flex;
}
.parent {
display: inline-flex;
}
Apart from the flex properties there are various other properties which are used together with flex to design a layout. Like:
- Ordering
- Flex-direction
- Flex-wrap
- Flex-flow
- Order
- Alignment
- Justify-content
- Align-items
- Align-self
- Flexibility
- Flex-grow
- Flex-shrink
- Flex and flex values
Let’s start with the properties that are used for ordering the layouts
Flex Direction
This property is used to specify how the elements inside the flex container are going to be organized by simply the direction of the elements. There are four property values that can be used
- row: the default property which is already in effect when display:flex is used. It aligns the elements from start to end.
- row-reverse: this property works similar to the row but the alignment of the elements is reversed i.e., the elements are sorted from end to start.
- column: there are times when we use display:flex not for making content inline but to set the order, alignment and in that case we may not want our elements to in lined so to reverse the inline effect column is used. The direction of elements is from top to bottom.
- column-reverse: similar to column but the elements are sorted from bottom to top.
.parent {
display: flex;
flex-direction: row;
}
.parent {
display: flex;
flex-direction: row-reverse ;
}
.parent {
display: flex;
flex-direction: column;
}
.parent {
display: flex;
flex-direction: column-reverse;
}
Note: When you use reverse properties the order of the elements is also changed.
Flex Wrap
Flex wrap property controls whether the elements inside will be multiline or will in single line. If you are assigning a fixed width to the parent and child then by default the elements will go out of the box. Flex wrap has three property values
- wrap: wrap makes the elements appear in multiline and they are placed according to the space given in parent with respect to the dimensions of the child.
- wrap-reverse: works similar to the wrap property but the elements are sorted in reverse order.
- nowrap: this is the default property and is used to make the elements single line.
.parent {
display: flex;
}
/* an addition to child class to see the effects */
.child {
width: 300px;
}
.parent {
display: flex;
flex-wrap: nowrap;
}
.parent {
display: flex;
flex-wrap: wrap;
}
.parent {
display: flex;
flex-wrap: wrap-reverse;
}
Flex Flow
Flex flow property is sort of shorthand for both flex:wrap and flex-direction. Here property values are the exact combination of what we saw in the same properties. So, the properties values go like this
- row wrap
- column wrap
- row nowrap
- column nowrap
And so on. Every possible combination can be used here with just a space between two.
Note you don’t need to use direction or wrap since flex-flow also supports the singular properties, meaning you can use flex-flow:column;
Order
The order property is quite useful and change layout totally. Say there are two divs i.e. div1 and div2 in traditional webpage they appear like div1 and after that div2. But you want div2 to go above the div1 in mobile layout how are you going to do this? Well, I don’t know about you but the answer to this one is pretty clear use flex and order.
Order property takes values in integer like -1, 0, and 1.
Here is an example here there are three divs with flex applied to it and now we div1 to the end div3 to be at div1s position.
.child:nth-child(1) {
order: 1;
}
.child:nth-child(1) {
order: 1;
}
.child:nth-child(3) {
order: -1;
}
See easily done now let’s try to set the alignment of these elements and shifting or organizing the layout without using margin and padding.
Alignment with Flex
The alignment property allows you to align the elements inside the flex-container horizontally and vertically.
Justify content
Justify content property allows you align the elements horizontally inside a flex-container with properties like
- flex-start: it’s the default property which makes elements shifted to starting position. Just like text-align:left property.
- flex-end: this property is used to align the from right or end position of flex container.
- center: shifts the elements to the center of the flex container
Now the ones below are pretty interesting
- space-between: this distributes the elements horizontally leaving no space in start and end but has space in between the elements.
- space-around: this distributes the elements horizontally but it leaves the space between the elements. The starting and ending space is equal to the space in between.
- space-evenly: this works similar to the around but the space in starting and ending is equal to the space between.
.parent {
display: flex;
justify-content: flex-start;
}
/* remove the width from child class */
.parent {
display: flex;
justify-content: flex-end;
}
.parent {
display: flex;
justify-content: center;
}
.parent {
display: flex;
justify-content: space-between;
}
.parent {
display: flex;
justify-content: space-around;
}
.parent {
display: flex;
justify-content: space-evenly;
}
Note: Remember justify-content works horizontally but when used with flex direction or flex flow with column as a property value it changes and starts to act vertically.
Align Items
Properties are quite similar to what we had in justify content but with a change this property works vertically. The property values this includes are
- stretch: this is the default property which makes the content stretched to what similar
- flex-start: aligns the items to top of the flex container
- flex-end: aligns the items to bottom of the flex container
- center: aligns the items to the center
- auto: works according to the property of the parent.
.parent {
display: flex;
align-items: stretch;
}
.parent {
display: flex;
align-items: flex-start;
}
.parent {
display: flex;
align-items: flex-end;
}
.parent {
display: flex;
align-items: center;
}
.parent {
display: flex;
align-items: baseline;
}
.parent {
display: flex;
}
.child:nth-child(2) {
align-self: auto;
}
Align Self
Align Self has the same property as of align items but these applied to the child itself not to the parent.
.child:nth-child(2) {
align-self: stretch;
}
.child:nth-child(2) {
align-self: flex-start;
}
.child:nth-child(2) {
align-self: flex-end;
}
.child:nth-child(2) {
align-self: center;
}
These are pretty much all the properties you’ll need to make a layout and these are mostly used in combination. Flex also includes the flex-grow, flex-shrink, flex-basis; they are, you can say, rarely used and don’t do much to shift the layout. If you use flexbox properly then you’ll never need to worry about the element shift that happens in the responsive part since most of it works well with flex.
If you want to read more about these properties check out the link below
https://yoksel.github.io/flex-cheatsheet/
You can also checkout the little game I found for practicing the flexbox properties
Add advanced website designing skills in you by getting your hands on HTML5 & CSS3. Attain professional level classes from our web design and development training in Delhi and pursue HTML5 & CSS3 course to start creating your own website like a web pro.
Get in touch with us on +91 9811818122 or contact us to schedule your demo session today.
