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; }

.parent { 
  display:flex; 
  flex-direction: column; 
}

.parent { flow:vertical; }

.parent { 
  display: flex; 
  flex-wrap: wrap; 
}
.child { 
  width:100px; 
}

.parent { 
  flow:horizontal-wrap; 
}
.child { 
  width:100px; 
}

.parent { 
  display:flex; 
  flex-direction: row; 
  justify-content: space-between; 
}

.parent { 
  flow:horizontal; 
  border-spacing:*; 
}

.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;
}

.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; 
}

.parent { 
  display:flex; 
  flex-direction: row; 
}
.child:nth-child(3) { 
  flex: 1;
}

.parent { 
  flow:horizontal; 
}
.child:nth-child(3) { 
  width:1*; 
}