Flexbox in CSS with Programming Examples
Description
Flexbox in CSS with Programming Examples- in this article, I am going to show you how to use the different properties and attributes of the CSS Flexbox. so in this article, you will learn the following topics in detail.
- What is Flexbox in Css?
- How to use Flexbox in css
- Flexbox specifications
- How to use Flexbox in CSS at an advanced level
What is Flexbox in CSS?
Flexbox is a new feature added in CSS3. The official name is Flexible Box Layout Module. You can create horizontal layouts more freely and easily than ever before. So you can have a flexible layout. When using this technique, we refer to the parent element as the flex container and the child element as the flex item. Let’s take a closer look at what other features it has!
adjusts height using Flexbox in CSS:
The great thing about CSS Flexbox is that it automatically aligns the height when you specify it. With floats and inline blocks, it rattles like this…Flexbox can align the height beautifully. Even if the wording increases in the future, it will automatically adjust again. There is no need to enter the height each time or control it with jQuery.
How to set Order using CSS Flexbox
Normally, if you create a horizontal layout, you can only arrange them in the same order as the vertical order. CSS Flexbox can freely change this order, even if the order of the menu suddenly changes, you can easily handle it.
Set margins Using Flexbox in CSS
The troublesome thing about arranging elements side by side is how to deal with the surrounding margins. With CSS Flexbox, you can specify how to do this margin with a one-line description. You will never have to worry about falling apart again.
Difference between Flexbox and grid in CSS
Similar to Flexbox, there is a grid in CSS. Both are methods of arranging elements in a nice way, but the mechanism is slightly different.CSS Flexbox has a one-dimensional layout. As shown in the figure below, it is the way to line up after lining up horizontally and then folding back down.CSS grid ignores the order of elements and can be arranged like a puzzle. This is called a two-dimensional layout. Since Flexbox in CSS is a one-dimensional layout, it is good at aligning things neatly. CSS grid, on the other hand, is good at arranging things like tiles or puzzles. Which one to implement depends on the state at the time and the design you want to implement.
Which Browser Supported the Flexbox:
Flexbox, I think there are many people who have guessed this convenience. Yes, old browsers such as IE9 and earlier cannot be used. However, it can be used without problems in the current browser. If you don’t need support for older browsers, don’t worry too much.
How to use Flexbox in CSS:
Let’s take a look at how to use Flexbox in CSS. This time I prepared something like this.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Enter the content.
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
FlexBox container in CSS
The settings specified for the parent element (Flex container) mainly concern the placement and alignment of child elements.
How to use CSS flexbox vertical alignment: align-items
This property adjusts the vertical position of horizontally aligned elements. It can be top-aligned or center aligned.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Enter the content.
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
align-items : stretch ; /* Vertical alignment */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
width : 15 %; /* width specification */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
How to use CSS flexbox horizontal alignment: justify-content
You can adjust the horizontal position, such as right alignment, center alignment, and even distribution.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest.
</div>
<divclass=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Enter the content.
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
justify-content:center;
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
width : 15 %; /* width specification */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
How to use CSS flexbox alignment direction: flex-direction
You can specify the direction in which they are arranged, such as 1, 2, 3 from the left, or 1, 2, 3 from the top.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Enter the content.
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
flex-direction : row ; /* Element order */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
width : 15 %; /* width specification */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
How to use CSS flexbox wrapping: flex-wrap
Flexbox is designed to adjust the width so that child elements (Flex items) can be displayed in one line. By specifying flex-wrap, it is possible to wrap and display.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
1
</div>
<div class=”flex_test-item”>
2
</div>
<div class=”flex_test-item”>
3
</div>
<div class=”flex_test-item”>
4
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
flex-wrap : wrap ; /* wrap specification */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
font-size : 30px ; /* font size */
width : 200px ; /* Specify width */
text-align : center ; /* text centered */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
How to use css flexbox multiline alignment: align-content
A multiline version of align-items.
It also adjusts the position and balance in the vertical direction.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
1
</div>
<div class=”flex_test-item”>
2
</div>
<div class=”flex_test-item”>
3
</div>
<div class=”flex_test-item”>
4
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
height : 300px ; /* specify height */
display : flex ; /* Make it flexbox */
flex-wrap : wrap ; /* wrap specification */
align-content : stretch ; /* Alignment specification when wrapping */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
font-size : 30px ; /* font size */
width : 200px ; /* Specify width */
text-align : center ; /* text centered */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
FlexBox items in CSS
The settings specified for child elements (Flex items) are mainly for adjusting the width of the element.
Adjust the order of elements: order
Set the order of elements. Only numerical values can be specified, and the numerical values are arranged in ascending order. Negative values are invalid.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Enter the content.
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
order : 3 ; /* Specify order */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
order : 2 ; /* Specify order */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
order : 4 ; /* Specify the order */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
order : 1 ; /* Specify order */
}
Using CSS flexbox Increase the width of an element: flex-grow
Child element sizing property. Specifies the percentage of how much a child element will stretch relative to other child elements if the parent element has space. The value specifies a numeric value. Negative values are invalid. The higher the number specified, the wider the width.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
1
</div>
<divclass=”flex_test-item”>
2
</div>
<divclass=”flex_test-item”>
3
</div>
<divclass=”flex_test-item”>
4
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
font-size : 30px ; /* Font size specification */
text-align : center ; /* text centered */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
flex-grow : 1 ; /* Specify width */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
Using CSS flexbox Shrink the width of an element: flex-shrink
Similar to flex-grow etc., it is a property for adjusting the size of child elements. Specifies, in percentage terms, how much to shrink the element to which this property is specified when it is full of content. Again, specify a numeric value. Similarly, negative values are invalid. Unlike flex-grow, the larger the specified number, the smaller the width will be displayed.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Enter the content.
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
flex-wrap : nowrap ; /* wrap specification */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
flex-shrink : 2 ; /* specify width */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
flex-shrink : 2 ; /* specify width */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
Specify the unit size of elements: flex-basis
As with width, you can specify the width explicitly in PX or %. The numbers that can be specified are numbers with units such as PX and %.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
1
</div>
<div class=”flex_test-item”>
2
</div>
<div class=”flex_test-item”>
3
</div>
<div class=”flex_test-item”>
4
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
font-size : 30px ; /* Font size specification */
text-align : center ; /* text centered */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
flex-basis : 200px ; /* Specify width */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
adjusting the size of elements: flex
You can specify flex-grow, flex-shrink, and flex-basis all at once.
It is a feeling that you can specify the maximum size and minimum size of the element at once It is described as follows.
If you specify it, it will be displayed as follows.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
1
</div>
<div class=”flex_test-item”>
2
</div>
<div class=”flex_test-item”>
3
</div>
<div class=”flex_test-item”>
4
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
font-size : 30px ; /* Font size specification */
text-align : center ; /* text centered */
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
flex : 2 1 100px ; /* width specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
flex : 1 3 100px ; /* width specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
Flexbox vertical alignment per child: align-self
A child element version of align-items. You can adjust the vertical alignment for each child element.
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Programming-Digest. Programming-Digest. Programming-Digest.
</div>
<div class=”flex_test-item”>
- Enter the content.
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
}
.flex_test-item {
padding: 10px;
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
width: 25%;
align-self: stretch;
}
.flex_test-item:nth-child(1) {
background-color : #2196F3; /* Background color specification */
}
.flex_test-item:nth-child(2) {
background-color : #4CAF50; /* Background color specification */
}
.flex_test-item:nth-child(3) {
background-color : #3F51B5; /* Background color specification */
}
.flex_test-item:nth-child(4) {
background-color : #00BCD4; /* Background color specification*/
}
Copy and paste! Flexbox usage sample
Flexbox, there are various detailed specifications and it is difficult … there may be some people. I have prepared various examples, so please copy and paste them and use them as a reference!
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
<img src=”test_img.jpg” alt=””>
</div>
<div class=”flex_test-item”>
<img src=”test_img.jpg”alt=””>
</div>
<div class=”flex_test-item”>
<img src=”test_img.jpg”alt=””>
</div>
<div class=”flex_test-item”>
<img src=”test_img.jpg”alt=””>
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color : #eee; /* Background color specification */
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
}
.flex_test-item {
color : #fff; /* font color */
margin : 10px ; /* outer margin */
border-radius : 5px ; /* rounded corners */
align-self : stretch ; /* vertical alignment */
}
img {
width : 100 %; /* Specify image size */
}
Images can also be arranged nicely.If you change the background color, you can make it look like an album.
How to Create a responsive menu using CSS flexbox:
In this example, you will learn how a responsive menu is created only using flexbox in CSS
HTML Code:
Place the below code in body tag
<div class=”flex_test-box”>
<div class=”flex_test-item”>
<a href = “URL” > Menu </a>
</div>
<div class=”flex_test-item”>
<a href = “URL” > Program </a>
</div>
<div class=”flex_test-item”>
<a href = “URL” > Games </a>
</div>
<div class=”flex_test-item”>
<a href = “URL” > Languages </a>
</div>
<div class=”flex_test-item”>
<a href = “URL” > Gaming Engines </a>
</div>
<div class=”flex_test-item”>
<a href = “URL” > Programming Ides </a>
</div>
</div>
CSS Code:
place the below code in style.css or use inline css style
.flex_test-box {
background-color: #00BCD4;
padding : 10px ; /* padding */
display : flex ; /* Make it flexbox */
justify-content : space-evenly ; /* Horizontal positioning */
}
.flex_test-item {
margin : 10px ; /* outer margin */
border-bottom : solid 1px #fff; /* Bottom line specification*/
}
.flex_test-item a {
color : #fff; /* font color */
text-decoration : none ; /* default CSS negation */
}
The global menu is also one shot! Even if the width becomes narrow, it will automatically adjust to some extent, so you can reduce the worry of collapse at once.
Summary
How was it? Flexbox in CSS is a very useful technique. There may be some difficult parts until you get used to it, but once you get the hang of it, you’ll get it. It is easier to adjust the placement than floats and inline blocks, so it will be more and more active in the future.
