117 — TeX stylesheet

hbox is a container, filling its items horizontally. The width is the sum of the included material. If a width is specified, the material is qj : space-between; An hbox is coded by display:flex with property flex-direction:row

To achieve TeX behavihor, hbox must have display:inline-flex otherwise a vskip will appear after the hbox. This is also true for vbox. TeX allows inlining hbox and vbox in a hbox.

But hbox stack vertically in a vbox. It is ok, the container has flex-direction:column.

display:inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display:inline-flex and display:flex.

vbox

Hello Dolly.
#### fig 01 : vbox (wd:90%) containing several hbox

vbox

align-items:stretch by default; (qj)
Hello Dolly.

fig 01.b : vbox (wd:90%) containing several hbox

Using align-items:flex-start; (ql)

hbox

fig 02 : hbox containing several hbox

fig 03 : hbox containing several hbox and vbox

align-items:flex-end is used to bottom align
other values are:
  flex-start, center, flex-end,
  stretch, baseline.

fig 03.b : hbox containing several hbox and vbox : baseline

hello
Hey!
Hey! 
align-items:baseline is used to align items.
Note 1: when a box does not contain material (text)
the baseline is bottom of the box.

Note 2: check the effect of nesting boxes with same height:
the inner box is on the baseline!
wd undefined
wd:5em ht:7em

fig 04 : vbox containing several vbox

default: align-items:stretch

vbox

wd undefined
wd:5em ht:7em

fig 04.b : vbox containing several vbox

with align-items:flex-start

mixed hboxes vboxes

1.1
2.1
2.2.1
2.2.2

fig 05: hbox containing nested boxes

vbox

Hello Dolly.
Voici du texte pour voir bien des choses.

fig 06 : vbox ( wd:undef ) containing several hbox

defaults:
  align-content: normal;
  align-items: normal=center;
  align-self: auto;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  flex-wrap: nowrap;
  justify-content: normal;
  justify-items: normal;
  justify-self: auto;
  text-align: start;
  text-align-last: auto;
  text-indent: 0px;
  text-justify: auto;
  vertical-align: baseline;

fig 07 : vbox align-items:center containing several hbox

Hello Dolly.
Voici du texte pour voir bien des choses.

fig 08 : vbox justify-content:center containing several hbox

Hello Dolly.
Voici du texte pour voir bien des choses.
Vertical justification. To be used when vbox.height is specified.
Defaults to justify-content:flex-start.
Other values:
    flex-start (ql), flex-end (qr), center (qc), space-between (qj),
    space-around, space-evenly.

fig 09 : hbox/wrap  align-content:space-around;  containing several hbox

Hello Dolly.
Voici du texte pour voir bien des choses.
Hello Dolly.
Voici du texte pour voir bien des choses.
This works for hbox when flex-wrap:wrap
With TeX "wrapping" works inside vbox, not hbox;

fig 10 : vbox container -  justify-self:stretch
justify-self:stretch
Hello Dolly.
Voici du texte pour voir bien des choses.

this is not specific to flex containers.

css-tricks.com/almanac/properties/j/justify-self/

justify-self and align-self have no effect in flex containers.

stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties Not align-self !!!

some reading

display:inline-flex

css detected: