Flex For Improving CSS Layout
A powerful tool for creating responsive and dynamic designs. Explore Flex For Improving CSS Layout and the benefits of Flexbox for modern web development.
What is Flex / Flexbox?
Flexbox is a layout model that allows their children’s elements to align horizontally and vertically with distributing space within a container.
When to use Flex / Flexbox?
We can use flexbox when we need to resize their children’s size or grow to fill unused space or shrink to avoid overflowing the Flex container, by aligning flexbox elements to fill a space or distribute space between elements. Unlock the world of Front End development in Pune with expert-led classes. From coding fundamentals to creating dynamic websites, join us to shape your digital journey!
Flex container types:
- display: flex
This container will work like a block element
- display: inline-flex
This container will work like an inline-block element. We can inline-flex element if their child does not have enough space, otherwise, both the container behavior is the same.
The sample code for this content is as follows:
HTML
<div class=”flex-container”>
<div class=”flex-item”>1</div>
<div class=”flex-item”>2</div>
<div class=”flex-item”>3</div>
</div>
CSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: dashed 4px #A9A9A9;
color: white;
}
.flex-item {
margin: 15px;
background: #56a2ff;
text-align: center;
min-height: 50px;
line-height: 50px;
font-weight: 600;
}
.flex-item:nth-of-type(1) {
width: 60px;
}
.flex-item:nth-of-type(2) {
width: 120px;
}
.flex-item:nth-of-type(3) {
width: 180px;
}
For Free, Demo classes Call: 8237077325
Registration Link: Click Here!
Flex Direction
- row (default): Arranges the elements from left to right.
- row-reverse: Reverses the order of elements in a row disposition
- column: Arranges the elements from top to bottom
- column-reverse: Reverses the orders of elements in a column disposition
.flex-container {
flex-direction: row;
}
.flex-container {
flex-direction: row-reverse;
}
Flex Wrap
In our first example the wrapper children do not show in the up-down container in single row. So we can set up-down into a single row like this :
- nowrap (default): Prevents the items in a flex container from wrapping
- wrap: Wraps items as needed into multiple rows
(or columns, depending on flex-direction)
- wrap-reverse: Just like the wrap, but the number of rows (or columns) grows
in the opposite direction as items are wrapped
.flex-container {
flex-wrap: nowrap;
}
.flex-container {
flex-wrap: wrap;
}
.flex-container {
flex-wrap: wrap-reverse;
}
Flex Flow
We can merge flex-direction and flex-wrap into a single property called flex-flow
.flex-container {
flex-flow: {flex-direction} {flex-wrap};
}
Justify Content
Below mentioned properties are used to control the horizontal alignment of the child elements:
- flex-start (default): Elements are aligned to the left
(similar to inline elements with text-align: left)
- flex-end: Elements are aligned to the right
(similar to inline elements with text-align: right)
- center: Elements are centered
(similar to inline elements with text-align: center)
- space-around: Every element will be rendered with same space around each.
- space-between: Just like space-around, except the elements will be separated by
same distance with no space near either edge of the wrapper.
.flex-container {
justify-content: flex-start;
}
.flex-container {
justify-content: flex-end;
}
.flex-container {
justify-content: center;
}
.flex-container {
justify-content: space-around;
}
.flex-container {
justify-content: space-between;
}
Align Items
Below mentioned properties are similar to justify-content but the context of its effects is the rows instead of the container itself:
- flex-start: Elements are vertically aligned to the top.
- flex-end: Elements are vertically aligned to the bottom.
- center: Elements are centered vertically within the container.
- stretch (default): Forces the elements to occupy the full height (if applied to row)
and the full width (when applied to a column) of the container.
- baseline: Vertically aligns the elements to their actual baselines.
.flex-container {
align-items: flex-start;
}
.flex-container {
align-items: flex-end;
}
.flex-container {
align-items: center;
}
.flex-container {
align-items: stretch;
}
.flex-container {
align-items: baseline;
}
For Free, Demo classes Call: 8237077325
Registration Link: Click Here!
Align Content
Below properties are works in the vertical axis and the context is the entire container (not the row like the previous example). To see its effects, you will need more than one row:
- flex-start: Rows are vertically aligned to the top (i.e., stacked from the top of the container).
- flex-end: Rows are vertically aligned to the bottom (i.e., stacked from the bottom of the container).
- center: Rows are centered in the container vertically.
- stretch (default): In general, this property stretches the elements to utilize the entire vertical height of the container. However, if you have set some specific height of the elements, that height will be honored and the remaining vertical space (in that row, below that element) will be empty.
- space-around: Every row will be rendered with the same amount of space around itself vertically (i.e., below and above itself). Note that the space between two rows will, therefore, be double the space between the top and bottom rows and the edges of the container.
- space-between: Just like space-around, except the elements will be separated by the same distance and there will be no space on the top and bottom edges of the container.
.flex-container {
align-content: flex-start;
}
.flex-container {
align-content: center;
}
.flex-container {
align-content: flex-end;
}
.flex-container {
align-content: space-around;
}
.flex-container {
align-content: space-between;
}
.flex-container {
align-content: stretch;
}
Flex Grow
This property sets the relative proportion of the available space that the element should be using. The value should be an integer, where 0 is the default.
Let’s say you have two different elements in the same flex container. If both have a flex-grow value of 1, they will grow equally to share the available space. But if one a flex-grow value of 1 and the other a flex-grow value of 2, as shown in the example below, this one with a flex-grow value of 2 will grow to take twice as much space as the first. Master front-end development with SevenMentor’s Front End Development Training in Pune with expert training. Learn HTML, CSS, JavaScript, and more to create stunning user interfaces. Start your coding journey today!
.flex-item {
flex-grow: 1; /* Default 0 */
}
.flex-item:nth-of-type(2) {
flex-grow: 2;
}
Align Self
The below property will apply individually to each element. The possible values are:
- flex-start: Vertically aligns the element to the top of the container.
- flex-end: Vertically aligns the element to the bottom of the container.
- center: Vertically centers the element within the container
- stretch (default): Stretches the element to occupy the full height of the container (when applied to a row) or the full width of the container (when applied to a column).
- baseline: Aligns the elements according to their actual baselines.
.flex-item:first-child {
align-self: flex-start;
}
.flex-item:first-child {
align-self: flex-end;
}
.flex-item:first-child {
align-self: stretch;
}
Order
Flexbox has the ability to reorder elements using the order property without modifying the DOM element. In much the same way that z-index controls the order in which items are rendered, order controls the order in which elements are positioned within the container. Elements with a lower order value are positioned before those with a higher order value
.flex-item:last-child {
order: -1;
}
Flex Shrink
flex-shrink is a similar to flex-grow, this property sets whether the element is “shrinkable” or not with an integer value. Similar to flex-grow, flex-shrink specifies the shrink factor of a flex item.
.flex-item {
flex-shrink: 1; /* Default 0 */
}
For Free, Demo classes Call: 8237077325
Registration Link: Click Here!
Flex Basis
“flex-basis” is a property that sets the default size of an element before available space is distributed and elements are set as per space. It is unsupported to calc() and box-sizing: border-box in every browser, So better use width, and if you need to use then set flex-basis: auto;
.flex-item {
flex-basis: size || auto; /* Default auto */
}
Do visit our channel to learn more: Click Here
Flex
“flex” is a shorthand operator to define flex-grow, flex-shrink, and flex-basis properties in a single line as follows :
.flex-container {
flex: {flex-grow} {flex-shrink} {flex-basis};
Author:-
Call now!!! | SevenMentor Pvt Ltd.
© Copyright 2021 | SevenMentor Pvt Ltd.