[css-align][css-flexbox]

Last version of CSS Flexbox specification still defines the align-self,
align-items, justify-content and align-content properties independently
of the new CSS Box Alignment specification. However, the Alignment
section headline makes a explicit reference to this spec in order to
define the alignment behavior for Flexbox. This situation causes some
contradictions, or at least, misunderstandings of what values are valid
and what not for Flexbox.

In the last Flexbox Editor's draft (2 March 2015) the alignment
properties are defined as follows:

- align-items
  + value:  flex-start | flex-end | center | baseline | stretch
  + initial: 'stretch'
  + computed value: specified value

- align-self:
  + value: auto | flex-start | flex-end | center | baseline | stretch
  + initial: 'auto'
  + computed value: 'auto' computes to parent’s align-items value;
otherwise as specified

- justify-content/align-content:
  + value: flex-start | flex-end | center | space-between | space-around
  + initial: 'flex-start'
  + computed value: specified value

In the last Alignment Editor's draft (18 December 2014) the same
alignment properties are defined as follows:

- align-items:
  + value: auto | stretch | <baseline-position> | [ <self-position> &&
<overflow-position>? ]
  + initial: 'auto'
  + computed value: specified value, except for auto (see prose)
     * 'stretch' for flex containers and grid containers
     * 'start' for everything else

- align-self:
   + value:  auto | stretch | <baseline-position> | [
<overflow-position>? && <self-position> ]
   + initial: 'auto'
   + Computed value: specified value, except for 'auto' (see prose)
       * The 'auto' keyword computes to itself on absolutely-positioned
elements, and to the computed value of align-items on the parent on all
other boxes, or 'start' if the box has no parent.

- justify-content/align-content:
  + value: auto | <baseline-position> | <content-distribution> || [
<overflow-position>? && <content-position> ]
  + initial: 'auto'
  + computed value: specified value, except for auto (see prose)
       * Flex containers: 'auto' computes to 'stretch'.
       * Gird containers: 'auto' computes to 'start'.
       * Block containers: For table cells the behavior of the 'auto'
depends on the computed value of vertical-align, otherwise it behaves as
'start'.

First of all, I think it's confusing to state that Flexbox spec "respect
the alignment properties from CSS Box Alignment" and then re-define
those properties with a subset of the allowed values and a different
initial and computed values behavior.

The most problematic case is 'start' as initial value, since it'd
declared as invalid when using as reference just the Flexbox
specification. The Flexbox item's align-items property will be resolved
to 'start' when using the 'auto' value as initial, according to the Box
Alignment specification, however, this is not a valid value according to
the Flexbox specification.

I think one way to solving these conflicts and avoid confusion would be
to just rely all the Flexbox Alignment behavior to the Box Alignment
specification, as the Gird Layout spec already does.

I understand that Box Alignment specification is not as stable and
Flexbox, but I wonder about the plans for the future regarding its
integration with the Flexbox spec.

BR.

--
javi

Received on Wednesday, 1 April 2015 12:09:23 UTC