- flex-grow
- flex-basis
- flex-shrink
- flex
- align-self
- Flexbox Playground

Flexbox item properties

- The css3 flexbox item properties presented bellow are applied to the item child inside flex container.
float, clear and vertical-align have no effect on a flex item, and do not take it out-of-flow.

order

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container. It takes integer value (-2, -1, 0, 1, 2, ..). Default value is 0, and increasing or decreasing it from there moves the item to the right or left, respectively.
Setting margin: auto; will absorb extra space. It can be used to push flex items into different positions, and perfectly centered it in both axis.
.flex-item {
 order: -1;
}
flexbox-order
- To swap places between first and last flex item, use a code like this:
.item:first-child {
 order:1;
}
.item:last-child {
 order:-1;
}

flex-grow

The flex-grow specifies how much the item will grow relative to the rest of the flexible items inside the same container. It takes positive number value (0, 1, 2, ..). Default value is 0.
- In the following code, the second flex item takes up three times more space than the rest:
.item:nth-child(2) {
 flex-grow: 3;
}
flexbox-flex-grow

flex-basis

The flex-basis specifies the initial length of a flexible item. Default value auto.
- In the following code, flex-basis is specified for the 4th flex item and dictates the initial size of the element:
.container .item {
 flex-basis:auto;
}

.container .item:nth-child(4) {
 flex-basis: 350px;
}
flexbox-flex-basis

flex-shrink

The flex-shrink specifies how the item will shrink relative to the rest of the flexible items inside the same container. It takes positive number value (0, 1, 2, ..). Default value is 1.
- In the following code, the second flex item shrinks three times more than the rest:
.container .item {
 flex-basis: 100px;
}

.container .item:nth-child(2) {
 flex-shrink: 3;
}
flexbox-flex-shrink

flex

The flex-shrink property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.
flex: flex-grow flex-shrink flex-basis;
Default value is: 0 1 auto.
- In the following example, the second flexbox item grows twice more than the rest of items, with a flex-basis of 150px. The value for flex-shrink it is not added, so it remains its default value (1).
.container .item:nth-child(2) {
 flex: 2 150px;
}
flexbox-flex

align-self

The align-self property specifies the alignment for the selected item inside the flexible container. It overrides the flexible container's align-items property.
- align-self values: - Example, the 3rd and 4th flex items have overridden alignment through the align-self property:
.container {
 align-items: flex-start;
 display: flex;
 height:90px;
 width: 400px;
}

.container .item:nth-child(3) {
 align-self: stretch;
}

.container .item:nth-child(4) {
 align-self: center;
}
Result:
flexbox-align-self

Flexbox Playground

Here's a flex playground where you can combine and play with several css flex properties. Test css3 flexbox properties for container and each of its child-items.
/* Flexbox Container Properties */ .container { display: ; flex-direction: ; flex-wrap: ; justify-content: ; align-items: ; align-content: ; margin:2px; padding:3px; height: ; width: ; }
/* Flexbox Item Properties */
Demo:
- Content Before..
Flexbox examples.
- Content After..

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
CSS3 Flexbox Item

Last accessed pages

  1. Register and show online users and visitors (33003)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (105430)
  3. Convert XML to JSON in JavaScript (22933)
  4. Understanding Events (162)
  5. The Essene Gospel of Peace (1762)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (104)
  2. Read Excel file data in PHP - PhpExcelReader (59)
  3. Register and show online users and visitors (56)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (55)
  5. JavaScript Course - Free lessons (44)