Comparison of display:flex (browser) and flow/flex units (Sciter)

This document can be viewed as in browser as in Sciter.

Note that display:flex breaks existing CSS box model so dimensions of .child elements may not match exactly.

direction: horizontal

.parent { 
  display:flex; 
  flex-direction: row; 
}
.parent { flow:horizontal; }
1
2
3
4

direction: vertical

.parent { 
  display:flex; 
  flex-direction: column; 
}
.parent { flow:vertical; }
1
2
3
4

direction horizontal wrap

.parent { 
  display: flex; 
  flex-wrap: wrap; 
}
.child { 
  width:40%; 
} 
.parent { 
  flow:horizontal-wrap; 
}
.child { 
  width:40%; 
}
1
2
3
4

horizontal justify-content space-between

.parent { 
  display:flex; 
  flex-direction: row; 
  justify-content: space-between; 
}
.parent { 
  flow:horizontal; 
  border-spacing:*; 
}
1
2
3
4

horizontal, vertical flex

.parent { 
  display:flex; 
  flex-direction: row; 
  height:8vw; 
  align-items:stretch;
}
.child:nth-child(3) { 
  align-self: flex-start; 
}
.parent { 
  flow:horizontal; 
  height:8vw; 
}
.child { 
  height:*;
}
.child:nth-child(3) { 
  height:max-content;
}
1
2
3
4

horizontal, vertical align

.parent { 
  display:flex; 
  flex-direction: row; 
  height:8vw; 
  align-items:center;
}
.child:nth-child(3) { 
  align-self: flex-start; 
}
.parent { 
  flow:horizontal; 
  height:8vw; 
}
.child { 
  margin-top:*; 
  margin-bottom:*; 
}
.child:nth-child(3) { 
  margin-top:0; 
}
1
2
3
4

horizontal, horizontal flex

.parent { 
  display:flex; 
  flex-direction: row; 
}
.child:nth-child(3) { 
  flex: 1;
}
.parent { 
  flow:horizontal; 
}
.child:nth-child(3) { 
  width:1*; 
}
1
2
3
4