Re: [css3-flexbox] [css3-grid-layout] Too Many Alignment Properties

On 02/01/2012 11:25 AM, fantasai wrote:
> So far we have 'vertical-align' and 'text-align', which mainly have to do with
> text, but the new layout models are starting to introduce a lot more aligns.
> Flexbox has four different alignment properties. IIRC Grid introduces several
> more [...]
>
> There's the problem of needing four appropriately generic and appropriately
> precise names, but I think we should be able to get away with four [alignment]
> properties in CSS total.

Ok, so here's a summary of the flexbox alignment properties:

  * flex-align      - assigns default cross-shift to each flex child
  * flex-item-align - cross-shifts flex item within line
  * flex-line-pack  - cross-shifts lines within flexbox
  * flex-pack       - main-shifts flex items

(Nevermind aligning with Grid or Block alignment, these four by themselves
are confusing enough to figure out which means what!)

There's also a fourth unsolved case: stretching the flex items, but aligning
the contents within them--as for the content of table cells in a table row.
I suspect this is a pretty common case, so it should be easy. (E.g. I have
my tab navigation across the top. I want to lay it out with flexbox, and I
want each box to have the same height, but I want the labels baseline-aligned.)

So anyway, here's my attempt to solve all this, take I. :)

Cross/Block-Axis alignment

   box-align:     auto | before | middle | after | baseline | stretch
   content-align: auto | before | middle | after | baseline
   content-pack:         before | middle | after | ... | stretch

   'box-align' applies to the element it's specified on.
     * The name makes it clear it applies to the element itself, and not
       its contents.
     * It replaces 'flex-item-align' and 'grid-row-align'.

   'content-align' applies to the element's contents.
     * The name makes it clear it applies to the contents, not the element
       itself.
     * Applied to the flexbox, it replaces 'flex-align'.
     * It can also be used on a flex item to align its contents within the
       flex item box, similar to 'vertical-align' on a table cell.
     * It could be defined to also apply to block elements; values other
       than 'auto' would turn the element into a BFC.

   'content-pack' is 'flex-line-pack'.
     * The name is given to match 'content-align', since it too aligns the
        element's contents, not the element itself.
     * It applies to flexboxes, but it could also be applied to, for example,
        a table row whose height is larger than the height of the baseline-
        aligned content of its cells.

   I chose 'align' because in this axis, we're often aligning things to
   each other, not just trying to fill a box.

   I chose 'pack' for 'content-pack' because after you've aligned
   everything together, it is what determines how you pack extra space
   around the aligned content to fit it into the box.

   I chose 'auto' as the initial value of 'content-align' so that its
   behavior can be tailored to the layout system at hand, without creating
   a naming conflict.

Main/Inline-Axis alignment

   box-justify: auto | start | center | end
   content-justify: auto | start | center | end | distribute | space

   As with 'box-align', 'box-justify' applies to the element itself.
   It's not relevant to Flexbox, but to Grid and to Block layout:
     * In grid layout it's the replacement for 'grid-column-align'.
     * In block layout, it allows for the combination of margins and
       alignment, e.g.
          table {
            /* want at least 1em margins on all sides */
            margin: 1em;
            /* center the table if it's smaller than the containing block */
            box-justify: center;
          }

   As with 'content-align', 'content-justify' applies to the element's
   contents.
      * It's not relevant to Grid, but applies to Flexbox, in which it
        replaces 'flex-pack'.
      * It could also be used to set the default 'box-justify' behavior
        of a block's children. In that case, 'distribute' and 'space'
        would behave as 'center', just as they would for the degenerate
        case of a flexbox with one item.)

   I chose 'justify' to indicate the axis that is most likely to be
   justified and most similar to text justification, i.e. the primary
   axis. In English and typography, justification can refer to full
   (double) justification, but it can also refer to alignment:
   'text-align: left' indicates left-justified text.

   I chose 'distribute' and 'space' in place of 'justify' and 'distribute'
   to make it clear which one puts spaces at the ends of the lines. (The
   'distribute' value for 'text-justify' and 'ruby-align' does not put
   space at the ends of lines.)

So, the result is 5 properties:
   * box-align
   * content-align
   * content-pack
   * box-justify
   * content-justify

You need to remember that 'justify' indicates alignment in the primary
axis, and 'align' in the secondary axis, and what 'pack' means for
flexboxes, if you have multiline flexboxes, but the rest is relatively
self-explanatory from the names. (Compare to the current situation,
where there is no real logic to it.)

~fantasai

Received on Thursday, 16 February 2012 16:05:18 UTC