Revision:
Bbefore the Flexbox layout module, there were four layout modes:
1/ block : for sections in a webpage,
2/ inline : for text,
3/ table: for two-dimensional table data,
4/ positioned: for explicit position of an element
The flexible box layout module makes it easier to design flexible responsive layout structure without using "float" or "positioning". Flexbox is used to arrange elements in one direction either in x(row) or y(column). Without using of "floats" a number of elements can be arrranged in a container.
To start using the Flexbox model, you need to first define a flex container.
examples
<div style="margin-left: 2vw;" class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.flex-container { display: flex; background-color: DodgerBlue; height:10vw; width: 30vw;}
.flex-container > div{ background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px;}
</style>
A flexible layout must have a "parent element" with the "display property"set to flex or inline-flex.
Direct "child element(s)"" of the flexible container automatically becomes flexible items.
The parent element (flex container) becomes flexible by setting the "display:" property to flex or inline-flex.
The flex container properties are:
- defines in which direction (either row or column) the container wants to stack the flex items : all elements will be arranged inside the container in one direction.
- possible values: row, column, row-reverse, column-reverse; default value: row;
examples
<div style="margin-left: 2vw;" class="flex-container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.flex-container1 { display: flex; background-color: DodgerBlue; flex-direction: column; width: 30vw;
height: 20vw;}
.flex-container1 > div{ background-color: #f1f1f1; width: 100px; margin: 10px; padding: 20px;
font-size: 30px;}
</style>
examples
<div style="margin-left: 2vw;" class="flex-container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.flex-container2 { display: flex; background-color: DodgerBlue; flex-direction: column-reverse; width: 30vw;
height: 20vw;}
.flex-container2 > div{ background-color: #f1f1f1; width: 100px; margin: 10px; padding: 20px;
font-size: 30px;}
</style>
examples
<div style="margin-left: 2vw;" class="flex-container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.flex-container3 { display: flex; background-color: DodgerBlue; flex-direction: row-reverse; width: 30vw; height: 5vw;}
.flex-container3 > div{ background-color: #f1f1f1; width: 100px; margin: 10px; padding: 20px; font-size: 30px;}
</style>
- specifies whether the flex items should wrap or not. Flex wrap will allow to arrange automatically all elements inside the container on available space by setting {flex-wrap: wrap;}.
- possible values : nowrap, wrap, wrap-revers; default value: nowrap.
The examples below have 15 flex items, to better demonstrate the flex-wrap property.
examples
<div style="margin-left: 2vw;" class="flex-container4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
<style>
.flex-container4 { display: flex; flex-wrap: wrap; background-color: DodgerBlue; width: 30vw; height: 30vw;}
.flex-container4 > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px;}
</style>
Try to resize the browser window
- is a shorthand property for setting both the "flex-direction" and "flex-wrap" properties.
examples
<div style="margin-left: 2vw;" class="flex-container5">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
<style>
.flex-container5 { display: flex; flex-flow: row wrap; background-color: DodgerBlue; width: 30vw; height: 30vw;}
.flex-container5 > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; font-size: 30px; font-size: 30px;}
</style>
Try to resize the browser window
- is used to align the flex items vertically or in x direction.
- possible values:
"center" : align the flex items at the center of the container.
"flex-start" : align the flex items at the beginning of the container (this is default).
"flex-end" : align the flex items at the end of the container.
"space-around" : display the flex items with space before, between, and after the lines.
"space-between" : display the flex items with space between the lines.
- is used to align the flex items horizontally or in y direction.
- possible values:
"center" : align the flex items in the middle of the container.
"flex-start" : align the flex items at the top of the container.
flex-end" : align the flex items at the bottom of the container.
"stretch" : stretches the flex items to fill the container (this is default).
"baseline" : align the flex items such as their baselines aligns.
examples
<div style="margin-left: 2vw;" class="flex-container6">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div>
<div><small>4</small></div>
</div>
<style>
.flex-container6 { display: flex; height: 200px; align-items: baseline; background-color: DodgerBlue; width: 30vw; }
.flex-container6 > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;}
</style>
Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline.
- is used to align the flex lines. It is used to align items horizontally or in y direction (for more elements).
- possible values:
"space-between" : display the flex lines with equal space between them.
"space-around" : display the flex lines with space before, between, and after them.
"stretch" : stretch the flex lines to take up the remaining space (this is default).
"center" : display the flex lines in the middle of the container.
"flex-start" : display the flex lines at the start of the container.
"flex-end" : display the flex lines at the end of the container.
examples
<div style="margin-left: 2vw;" class="flex-container7">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
<style>
.flex-container7 { display: flex; height: 20vw; flex-wrap: wrap; align-content: space-between; background-color: DodgerBlue;}
.flex-container7 > div { background-color: #f1f1f1; width: 4vw; height: 3vw; margin: 1vw; text-align: center; line-height: 2vw; font-size: 2vw;}
</style>
Perfect centering: set both the "justify-content" and "align-items" properties to center, and the flex item will be perfectly centered.
examples
<div style="margin-left: 2vw;" class="flex-container8">
<div></div>
</div>
<style>
.flex-container8 { display: flex; justify-content: center; align-items: center; height: 20vw; background-color: DodgerBlue;}
.flex-container8 > div { background-color: #f1f1f1; color: white; width: 10vw; height: 10vw;}
</style>
The direct child elements (items) of a flex container automatically become flexible (flex) items.
The flex item properties are:
- specifies the order of the flex items. The first flex item in the code does not have to appear as the first item in the layout. The "order" value must be a number, default value is 0. The "order" property can change the order of the flex items:
examples
<div style="margin-left: 2vw;" class="flex-container9">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
<style>
.flex-container9 { display: flex; align-items: stretch; background-color: #f1f1f1; width: 30vw; height: 10vw;}
.flex-container9>div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center;
line-height: 75px; font-size: 30px;}
</style>
- specifies how much a flex item will grow relative to the rest of the flex items. The value must be a number, default value is 0. On default, the item takes the width or flex-basis value. With value 1 or greater than 1, it tries to fill the parent element(if space is available).
examples
<div style="margin-left: 2vw;" class="flex-container10">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
<style>
.flex-container10 { display: flex; align-items: stretch; background-color: #f1f1f1; width: 30vw; height: 10vw;}
.flex-container10 > div{background-color: DodgerBlue; color: white; margin:10px; text-align: center; line-height:75px;
font-size: 30px;}
</style>
The property makes the third flex item grow eight times faster than the other flex items.
- specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number, default value is 1. When the parent element's total width is lesser than the width of the children elements, it starts to shrink the element(s). If value equals 0, it doesn't shrink the element(s).
examples
<div style="margin-left: 2vw;" class="flex-container10A">
<div style="flex-shrink: 1">1</div>
<div style="flex-shrink: 0">2</div>
<div style="flex-shrink: 2">3</div>
</div>
<style>
.flex-container10A { display: flex; align-items: stretch; background-color: #f1f1f1; width: 30vw; height: 10vw;}
.flex-container10A > div{ background-color: DodgerBlue; color: white; margin: 10px; text-align: center;
line-height: 75px;
font-size: 30px;}
</style>
- specifies the initial length of a flex item. It sets the initial size of the child element. In the example here below: set the initial length of the third flex item to 200 pixels.
examples
<div style="margin-left: 2vw;" class="flex-container11">
<div>1</div>
<div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div>
</div>
<style>
.flex-container11 { display: flex; align-items: stretch; background-color: #f1f1f1; width: 30vw; height: 10vw;}
.flex-container11 > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center;
line-height: 75px;
font-size: 30px;}
</style>
is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
specifies the alignment for the selected item inside the flexible container. The align-self property overrides the align-items property of the container.
examples
code:
<div style="margin-left: 2vw;" class="flex-container12">
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
<style>
.flex-container12 { display: flex; height: 200px; background-color: #f1f1f1; width: 30vw; height: 20vw;}
.flex-container12 > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center;
line-height: 75px;
font-size: 30px;}
</style>
The "align-self: center;" aligns the selected flex item in the middle of the container.
a way to create different layouts for different devises is to change the percentage of the "flex" property of the flex items.
Note that we also have to include "flex-wrap: wrap;" on the flex container for this example to work.
examples
code:
<div style="margin-left: 2vw;" class="flex-container13">
<div class="flex-item-left">1</div>
<div class="flex-item-right">2</div>
</div>
<style>
.flex-container13 {display: flex; flex-direction: row; font-size: 2vw; text-align: center; width: 30vw; height: 10vw;}
.flex-item-left{background-color: #f1f1f1; padding: 1vw; flex: 50%; }
.flex-item-right{background-color:dodgerblue; padding: 1vw; flex:50%;}
/* responsive layout - one column-layout instead of two-column layout*/
@media (max-width: 800px){
.flex-container13{ flex-direction: column}
}
</style>
Note that we also have to include "flex-wrap: wrap;" on the flex container for this example to work.
examples
<div style="margin-left: 2vw;" class="flex-container14">
<div class="item-left">1</div>
<div class="item-right">2</div>
</div>
<style>
.flex-container14 {display: flex; flex-wrap: nowrap; font-size: 2vw; text-align: center; width: 30vw; height: 10vw;}
.item-left{background-color: #f1f1f1; padding: 1vw; flex: 50%;}
.item-right{background-color:dodgerblue; padding: 1vw; flex: 50%;}
/* responsive layout - one column-layout instead of two-column layout*/
@media (max-width: 800px){
.flex-container14{flex-wrap: wrap;}
.item-left, .item-right{flex: 100%;}
}
</style>
Browser support for this CSS feature is improving. You can now start using "gap", "row-gap", and "column-gap" to create space in layouts created with grid, flexbox, and multi-column layouts.
examples
.boxes {
display: flex;
gap: 12px;
}
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
In case both "flex-basis" (other than auto) and "width" (or "height" in case of flex-direction: column) are set for an element, flex-basis has priority.
If the element is not a flexible item, the flex-basis property has no effect.
syntax examples
/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;
/* Intrinsic sizing keywords */
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Automatically size based on the flex item's content */
flex-basis: content;
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;
'width': any of the following units:
length : sets an absolute value;
percentage : sets a percentage of the width or height of a containing block's content area;
auto : uses the value of the width in horizontal writing mode, and the value of the height in vertical writing mode; when the corresponding value is also auto, the content value is used instead;
max-content : sets the intrinsic preferred width;
min-content : sets the intrinsic minimum width;
fit-content : sets the maximum possible size of a containing block's content area, bounded by the min-content and max-content values, and calculated based on the content of the current element.
content: indicates automatic sizing, based on the flex item's content.
examples
<div>
<ul class="container-x">
<li class="flex flex1">1: flex-basis test</li>
<li class="flex flex2">2: flex-basis test</li>
<li class="flex flex3">3: flex-basis test</li>
<li class="flex flex4">4: flex-basis test</li>
<li class="flex flex5">5: flex-basis test</li>
</ul>
<ul class="container-x">
<li class="flex flex6">6: flex-basis test</li>
</ul>
</div>
<style>
.container-x {font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex;flex-wrap: wrap;}
.flex {background: #6ab6d8; padding: 1vw; margin-bottom: 5vw; border: 0.2vw solid #2e86bb; color: white; font-size: 0.8vw;
text-align: center; position: relative;}
.flex::after {position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 1vw; width: 100%; color: #333; font-size: 0.8vw;}
.flex1 {flex-basis: auto;}
.flex1::after {content: "auto";}
.flex2 {flex-basis: max-content;}
.flex2::after {content: "max-content";}
.flex3 {flex-basis: min-content;}
.flex3::after {content: "min-content";}
.flex4 {flex-basis: fit-content;}
.flex4::after {content: "fit-content";}
.flex5 {flex-basis: content;}
.flex5::after {content: "content";}
</style>
inline-flex tells browsers to display the selected HTML element as an inline-level flexible box model. In other words, setting an element's "display property's" value to inline-flex turns the box model into an inline-level flexbox.
{display: inline-flex} does not make "flex items" display inline. It makes the "flex container" display inline. That is the only difference between "{display: inline-flex}" and "{display: flex}"".
example
section {
display: inline-flex;
background-color: orange;
margin: 10px;
padding: 7px;
}
The snippet above used the inline-flex value to convert the HTML document's <section> elements from regular <section> nodes to inline-level flexible box models.
Converting an HTML node to a flexible box model makes the element's direct children become flexible items. The '{display: inline-flex}" directive only affects a box model and its direct children. It does not affect grandchildren nodes.