When an element is a direct child of a flex container, it becomes a flex item, and some properties can be applied to it to control its behavior within the container.
order
- The order property allows you to change the visual order in which flex items appear within their container, irrespective of their order in the HTML source.
- By default, the order of all flex items is 0.
- You can assign integer values (positive or negative) to the order property of flex items. Items with lower order values appear earlier in the flex container. If multiple items have the same order value, they will be displayed according to their source order.
- For instance, setting order: -1 on an item will move it to the beginning, while order: 1 will move it to the end.
Code Example:
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
margin: 5px;
padding: 15px;
text-align: center;
}
.item1 {
order: 2;
}
.item2 {
order: -1;
}
.item3 {
order: 1;
}
<div class="flex-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>In the above example, “Item 1” comes first in the HTML, it will be displayed second. “Item 2” will be displayed first, and “Item 3” will be displayed third.
flex-grow
- The flex-grow attribute allows flex items to grow in flex containers with room.
- The unitless integer it accepts is a percentage to other flex items in the container.
- If all flex items have flex-grow 1, they share space. If an object has flex-grow 2 and others have 1, it will take up twice as much space.
- An object with flex-grow: 0 cannot grow beyond its flex-basis.
- Flex-grow causes flex items to fill the space, making justify-content less significant for space distribution.
Code Example:
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
width: 400px; /* Set a width for the container */
}
.item {
background-color: #ccc;
color: #333;
margin: 5px;
padding: 15px;
text-align: center;
flex-basis: 50px; /* Set an initial size */
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 1;
}
<div class="flex-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>In the above example, “Item 2” will grow to take up twice as much of the available space as “Item 1” and “Item 3”.
flex-shrink
- The flex-shrink attribute defines a flex item’s capacity to shrink should the combined size of all flex items surpass that of the flex container.
- Its value is also a unitless number that acts as a percentage showing how much the item should decrease in relation to others.
- A flex-basis item will not shrink below its flex-shrink: 0. When there isn’t enough room, things with higher flex-shrink values will shrink more than those with lower values.
- If the flex container has flex-wrap turned on, the flex-shrink attribute is disregarded..
Code Example:
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
width: 300px; /* Set a constrained width for the container */
}
.item {
background-color: #ccc;
color: #333;
margin: 5px;
padding: 15px;
text-align: center;
flex-basis: 150px; /* Initial size exceeds container width */
}
.item1 {
flex-shrink: 1;
}
.item2 {
flex-shrink: 0; /* Will not shrink */
}
.item3 {
flex-shrink: 1;
}
<div class="flex-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>In the above example, “Item 1” and “Item 3” will try and fit within the container, while “Item 2” will maintain its flex-basis a cause an overflow.
flex-basis
- The flex-basis property describes the initial main size of a flex item. the starting width (if flex-direction is row) or height (if flex-direction is column) of the item before any occurs.
- It can be specified as a <length> (e.g., px, em), a <percentage> relative to the flex container’s main size, or the keyword auto.
- flex-basis is set to auto (the initial value), the browser first look at the item’s width or height property. not set, the item’s size will be determined by its content.
- flex-basis is set to a value other than auto, the width or height property of the flex item will be ignored for the main axis.
Code Example:
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
margin: 5px;
padding: 15px;
text-align: center;
/* width: 100px; Will be ignored because flex-basis is set */
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
<div class="flex-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>In the above example, “Item 1” and “Item 3” will have an initial width of 100px, while “Item 2” will have an initial width of 200px.
align-self
- The align-self property allows to override the align-items property set on the flex container for individual flex items.
- It controls the alignment of a specific flex item along the cross axis.
- It accepts the same values as the align-items property: auto (which inherits the parent’s align-items value), flex-start, flex-end, center, baseline, and stretch.
Code Example:
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item align-middle">Item 2</div>
<div class="item">Item 3</div>
</div>
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
height: 200px; /* Set a height for the container */
align-items: flex-start; /* Default cross-axis alignment */
}
.item {
background-color: #ccc;
color: #333;
margin: 5px;
padding: 15px;
text-align: center;
}
.align-middle {
align-self: center; /* Overrides align-items for this item */
}
In the above example, the flex container align items to the top (flex-start) of the container along the cross axis. The class align-middle override this behavior and align itself to the center of the cross axis.
The flex property is a shorthand for setting flex-grow, flex-shrink, and flex-basis in that order. It is generally recommended to use the flex shorthand for clarity. For example, flex: 1 0 auto; is equivalent to flex-grow: 1; flex-shrink: 0; flex-basis: auto;.
What is the difference between flex container and flex item?
The difference between a flex container and a flex item lies in their roles and the CSS properties that primarily affect them.
The parent element with the display property set to either flex or inline-flex is a flex container. Applying display: flex to an element creates a flex formatting context for its direct offspring. The arrangement of its flex components is controlled by the flex container. Applied to the flex container are properties:
- display: flex or display: inline-flex
- flex-direction
- flex-wrap
- flex-flow (shorthand for flex-direction and flex-wrap)
- justify-content (controls alignment along the main axis)
- align-items (controls alignment along the cross axis)
- align-content (controls the spacing of flex lines when there are multiple lines)
A flex item is a direct offspring of a flex container. All of its direct descendants turn become flex items once a parent element is classified as a flex container. Flex items are arranged according to the guidelines set by their parent flex container. Among the properties that may be applied to single flex elements to govern their behaviour inside the container are:
- order (changes the visual order of items)
- align-self (overrides the align-items property for a single item)
- flex-grow (defines the ability of an item to grow)
- flex-shrink (defines the ability of an item to shrink)
- flex-basis (defines the initial main size of an item)
- flex (shorthand for flex-grow, flex-shrink, and flex-basis)
The flex container establishes the stage for a flexible layout, while the flex elements function inside that stage, according to the container’s commands while yet retaining some individual autonomy over their look and size. Flexbox is defined as a box paradigm for user interfaces that allows for item alignment and space distribution within a container to accommodate varying screen sizes.
CSS3 Topics