CSS Display Flex test

Flexbox


.flex-container{
  box-sizing: border-box;
  background-color: black;
  display: flex;
  /*display: inline-flex;*/
  margin: 0;
  width: 300px;
}

.flex-item{
  box-sizing: border-box;
  background-color: lightyellow;
  flex: 0 0 100px;
  margin: 5px;
  padding: 10px;
  text-align: center;
}
1
2longtexthereverylong
3
4

Flex values

One-value syntax

The value must be one of:
- a valid value for <flex-grow>: then the shorthand expands to flex: <flex-grow> 1 0.
- a valid value for <flex-basis>: then the shorthand expands to flex: 1 1 <flex-basis>.
- the keyword none or one of the global keywords. 


.syntax-1 {
  width: 600px;
}

.syntax-1 .flex-item{
  flex: none;
  flex: 3;     /* flex: <flex-grow> 1 0 */
  flex: 100px; /* flex: 1 1 <flex-basis> */
}
1
2
3
4

In line styling

1
2
3
4

Two-values syntax

The first value must be a valid value for <flex-grow>
The second value must be one of:
-a valid value for <flex-shrink>;
-a valid value for <flex-basis>. 


.syntax-2 {
  width: 600px;
}

.syntax-2 .flex-item{
  flex: 2 1;     /* flex: <flex-grow> <flex-shrink> 0 */
  flex: 2 50px;  /* flex: <flex-grow> 1 <flex-basis>  */
}
1
2
3
4

Three-values syntax

The values must be in the following order:
- a valid value for <flex-grow>;
- a valid value for <flex-shrink>;
- a valid value for <flex-basis>. 


.syntax-3 {
  width: 600px;
}

.syntax-3 .flex-item{
  flex: 1 1 100px;     /* flex: <flex-grow> <flex-shrink> <flex-basis> */
}
1
2
3
4

*

just a test
Inspired by info on MDN.