Inline Flex Box
![Exploring Inline Flex Box for Dynamic Layouts](/_next/image/?url=https%3A%2F%2Fstatic.d-libro.com%2F01-course-content-images%2F1011-10-HTML-CSS-Introduction%2F010-main-figures%2Finline-flex-box-id101110151310.webp&w=1920&q=75)
When you set inline-flex
as the display property value for a parent element, the element becomes a flex container with the inline-block
characteristic.
A difference between Flex Box and Inline Flex Box
Flex Box
The standard flex container behaves like a block element – the container starts on a new line like in the illustration below.
![Flex Box example Flex Box example](https://static.d-libro.com/01-course-content-images/1011-10-HTML-CSS-Introduction/020-image-insert/flex-box-example-id101110151310-img01.webp)
Inline Flex Box
For Inline Flex Box, the flex container behaves like an inline-block element, so that you can put more than one container in the same line.
![Inline Flex Box example Inline Flex Box example](https://static.d-libro.com/01-course-content-images/1011-10-HTML-CSS-Introduction/020-image-insert/inline-flex-box-example-id101110151310-img02.webp)
Practice
Objective:
Check the difference between Flex Box and Inline Flex Box
1. Update the body section of the HTML file
Add the code below in the <body>
section of the chapter15.html file. We are directly adding styles to the flex containers to change the display property.
<h2>Inline Flex Box</h2>
<h3>Flex Box</h3>
<div class="flex-container" style="display: flex; width: 120px; margin: 5px">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<div class="flex-container" style="display: flex; justify-content: flex-end; width: 120px; margin: 5px">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>Inline Flex Box</h3>
<div class="flex-container" style="display: inline-flex; width: 120px; margin: 5px">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<div class="flex-container" style="display: inline-flex; justify-content: flex-end; width: 120px; margin: 5px">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<hr>
2. Check the result with a browser
- Open chapter15.html with a browser.
- You can see the differences between Flex Box and Inline Flex Box.
You can also check the sample result here (Demo Site).