W3C home > Mailing lists > Public > www-style@w3.org > May 2012

Re: [css3-align] The Great Alignment Bikeshed

From: François REMY <fremycompany_pub@yahoo.fr>
Date: Mon, 14 May 2012 20:19:02 +0200
Message-ID: <9AF7D4814AF145029FEB75720E049F71@FREMYD2>
To: "fantasai" <fantasai.lists@inkedblade.net>, <www-style@w3.org>
FWIW, my take would be:

    outer-align; outer-justify;
    inner-align; inner-justify;

    child-outer-align; child-outer-justify;

However, I'm not completely sold to "child-outer-align" and 
"child-outer-justify". This case is better solved with a pseudo-class.

    myBox {


        &::layout-element {



-----Message d'origine----- 
From: fantasai
Sent: Monday, May 14, 2012 1:21 AM
To: www-style@w3.org
Subject: [css3-align] The Great Alignment Bikeshed

So the CSSWG agreed last week to pursue a common alignment property model,
based on the "Box Alignment" proposal I posted to the list a few weeks ago.
This thread is on what names to use on each of the properties. Let's make
this quick, so we can use those names for Flexbox alignment!


Fundamentally, we're breaking down the properties along two axes:

   * in which dimension are things being shifted? There are two:
       X) inline (main)
       Y) stacking (cross)

   * what's being aligned within what?
       A) element itself within its containing block
       B) element's contents within itself
       C) element's child items within their container

The last concept's a bit tricky: it exists due to 'flex-align', which sets
the default cross-alignment (i.e. interpretation of 'flex-item-align: auto')
for the child flex items. This is different from B), which for Flexbox 
the entire stack of lines within the flex container (i.e. 'flex-line-pack').
For a grid container, it would set the default alignment of each grid item
within its slot--as opposed to the alignment of the grid within the grid
element (if the grid is smaller than the grid element). The idea is to
control, as a set, all the children whose alignment container is not the
element itself, but some intermediate structure.

On to the candidates! I have collected three sets, which you can mix and
match, below. (They are also listed in the draft.)

Set 1: Box/Content/Default

  A |     box-justify      box-align
  B | content-justify  content-align
  C | default-justify  default-align

Set 2: Self/Content/Item

  A |    self-justify     self-align
  B | content-justify  content-align
  C |    item-justify     item-align

Set 3: Outside/Inside/Items

  A | justify-outside  align-outside
  B | justify-inside   align-inside
  C | justify-items    align-items

What do you think works best? Why? Do you have another suggestion?

p.s. If you want nicer typesetting of this issue, there's this overview:
Further background is available in this email, which formed the basis
for the Box Alignment draft:

Received on Monday, 14 May 2012 18:19:34 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:16 UTC