- CSS3 provide flexible layout module as flex box.
- Flex box elements are direction based element.
- You can checkout below URL for more details on Flex box.
- In this Demo, “We will learn about flex and inline-flex value of display property”.
- flex property has feature like block HTML element.The parent flex container has 100% width.
- inline-flex has feature like inline element.The parent flex container has the width of the content.
- display:flex/inline-flex is used for the parent container.
- Below code shows the HTML markup demo for flex and inline-flex value.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>FlexBox Style Demo</title>
<link rel="stylesheet" href="flex-box.css">
<style>
.flex-box-container {
display: flex;
background: red;
}
.flex-box-container .element {
width: 50px;
height: 50px;
text-align: center;
font-size: 24px;
background: black;
color: white;
margin: 2px;
}
.flex-box-inline-container {
display: inline-flex;
background: red;
}
.flex-box-inline-container .element {
width: 50px;
height: 50px;
text-align: center;
font-size: 24px;
background: black;
color: white;
margin: 2px;
}
</style>
</head>
<body>
<h3>Demo: display:flex; Behaves Like BLOCK element of width:100%</h3>
<div class="flex-box-container">
<div class="element">
1
</div>
<div class="element">
2
</div>
<div class="element">
3
</div>
<div class="element">
4
</div>
</div>
<br/><br/>
<h3>Demo: display:flex; Behaves Like INLINE element of width as much content</h3>
<div class="flex-box-inline-container">
<div class="element">
1
</div>
<div class="element">
2
</div>
<div class="element">
3
</div>
<div class="element">
4
</div>
</div>
</body>
</html>
