ブロック、絶対配置、表レイアウトのブロック配置

この翻訳は不完全です。英語から この記事を翻訳 してください。

ボックス配置仕様書は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となるボックス配置ページを併せて読んでください。

Note: At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.

align-content と justify-content

The justify-content property does not apply to block containers or table cells.

The align-content property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject.

justify-self

The justify-self property is used to align an item inside its containing block on the inline axis.

This property does not apply to floated elements or table cells.

絶対配置要素

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

align-self

The align-self property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.

絶対配置要素

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

Aligning in these layout methods today

As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.

Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A margin of auto will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:

.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

In table layout, you have access to the vertical-align property to align the contents of a cell inside that cell.

For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.

リファレンス

CSS プロパティ

用語集の項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,