- 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
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
CSS3 Flexbox Item

Last accessed pages

  1. Countdown Timer until specified Date-Time (3820)
  2. Drag Racer V3 (15010)
  3. The Rise Of Atlantis (10418)
  4. Qwop (40210)
  5. Insert, Select and Update NULL value in MySQL (17115)

Popular pages this month

  1. Qwop (7385)
  2. Drag Racer V3 (5115)
  3. Bubbles3 (2030)
  4. List with All the Games (1718)
  5. Flash Games - Free online Games (1604)