CSS flex - display: flex - CSS Flexbox Layout
CSS Tutorial » CSS flex - display: flex - CSS Flexbox Layout
Study in this chapter:
1. - What is display flex property?
2. - display: flex full width
3. - display: flex in line
The flex CSS shorthand sets how a flex element will grow or shrink to fit the available space in its flex container.
We can add display: flex to an element as:Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Inline - by using the style attribute in HTML elements
Syntax:
Inline CSS.
Example:
Browser Support
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| display: flex | Yes | Yes | Yes | Yes | Yes |
display: flex full width 100%
Definition and Usage:
Setting the length of an element to 100% takes the entire available length of its parent. The example below uses the length property to fill the horizontal space.
<!DOCTYPE html>
<html>
<head>
<style>
.main-box{
display: flex;
height:100px;
background:#64E0FF
}
.box{
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
float: left;}
.box3{
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
float: left;
width: 100%;
}
</style>
</head><body>
<p><strong>Internal Style</strong> - by using a <style> element in the <head> section</p>
<div class="main-box">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box3">box3</div>
</div>
<hr>
<p><strong>Inline</strong> CSS.
</p>
<div style="display: flex; height:100px; background:#64E0FF;">
<div style="background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px;height: 60px; float: left;">box1</div>
<div style="background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px;height: 60px; float: left;">box2</div>
<div style="background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px;height: 60px; float: left;">box3</div>
</div>
</body>
</html>
Related subjects:
Table Size width and height
Border Style
border width
display: flex vs display: inline-flex
What's the difference?
Example 1: display: flex
<!DOCTYPE html>
<html>
<head>
<style>.box--inline-flex,
.box--flex {
background-color: #6CF;;
margin-bottom: 10px; /* just for aesthetics */
}
.box--flex {
display: flex;}
.box--inline-flex {
display: inline-flex;
}
.flex-child {
flex: 1;
min-width: 50px;
min-height: 50px;
margin: 10px;
background-color: #FF9;
}.flex-color {
color: #039;
}
.inline-color {color: #0C6;
}/* Remaining styles are just to make the demo look nice */
body {
font-family: 'Open Sans', sans-serif;
}
code {
background-color: #EEEEEE;
padding: 1px 5px;
}
</style>
</head>
<body>
<h1><code>display: flex</code> vs <code>display: inline-flex</code></h1>
<subtitle>What's the difference?</subtitle><h2>Example 1: <code>display: flex</code></h2>
<div class="box--flex">
<div class="flex-child">gbjklj</div>
<div class="flex-child">guilgu</div>
<div class="flex-child">bjkb</div>
</div>
<div class="box--flex">
<div class="flex-child">guhgb</div>
<div class="flex-child">bjkb</div>
<div class="flex-child"> bm </div>
</div>
<div class="box--flex">
<div class="flex-child">vcghj</div>
<div class="flex-child"> bj </div>
<div class="flex-child">cgj, </div>
</div>
</body>
</html>
Example 2: display: inline-flex
<!DOCTYPE html>
<html>
<head>
<style>.box--inline-flex,
.box--flex {
background-color: #6CF;;
margin-bottom: 10px; /* just for aesthetics */
}
.box--flex {
display: flex;}
.box--inline-flex {
display: inline-flex;
}
.flex-child {
flex: 1;
min-width: 50px;
min-height: 50px;
margin: 10px;
background-color: #FF9;
}.flex-color {
color: #039;
}
.inline-color {color: #0C6;
}/* Remaining styles are just to make the demo look nice */
body {
font-family: 'Open Sans', sans-serif;
}
code {
background-color: #EEEEEE;
padding: 1px 5px;
}
</style>
</head>
<body>
<div class="box--inline-flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div class="box--inline-flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div class="box--inline-flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
</body>
</html>
Explanation
display: flex element is similar to the display: block element, where it takes up the entire row. However, its secondary elements can be positioned flexibly and dynamically.
If we change this to: inline-flex, what happens:
- this causes the parent box to be displayed inline
- it still applies all flex properties to children, without being displayed differently: flex
Tags: display flex: css, justify-content, column, space between, align center, gap, width 100, align right, in line
Display flex space between items
To set a fixed spacing between elements (like 10px, 20px, etc.) or between flexbox items, you can simply use the CSS padding and margin property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Fixed Space Between Flex Items</title>
<style>
.flex-container {
height: 250px;
display: flex;
border: medium solid #03C;
padding: 12px;
}
.item {
flex: auto;
margin: 10px;
background-color: #D6D9DC;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
<div class="item">Element 3</div>
<div class="item">Element 4</div>
</div>
</body>
</html>
Summary of description
justifay-content, column, space between, align center, gap, width 100, align right, in line container
CSS flex - display: flex - CSS Flexbox Layout - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.