WP5.3で検証

レイアウト要素

カラム

デフォルト表示

デフォルト（2カラム均等割）

左

右

<div class="wp-block-columns">
	<div class="wp-block-column">
		<p>左</p>
	</div>
	<div class="wp-block-column">
		<p>右</p>
	</div>
</div>

その他の分割例

左1

右2

<div class="wp-block-columns">
	<div class="wp-block-column" style="flex-basis:33.33%">
		<p>左1</p>
	</div>
	<div class="wp-block-column" style="flex-basis:66.66%">
		<p>右2</p>
	</div>
</div>

左

中

右

<div class="wp-block-columns">
	<div class="wp-block-column">
		<p>左</p>
	</div>
	<div class="wp-block-column">
		<p>中</p>
	</div>
	<div class="wp-block-column">
		<p>右</p>
	</div>
</div>

左1

中2

右1

<div class="wp-block-columns">
	<div class="wp-block-column" style="flex-basis:25%">
		<p>左1</p>
	</div>
	<div class="wp-block-column" style="flex-basis:50%">
		<p>中2</p>
	</div>
	<div class="wp-block-column" style="flex-basis:25%">
		<p>右1</p>
	</div>
</div>

ブロック設定パネル

高度な設定

カラムの設定

カラム数
2〜6で設定

列の設定

カラム設定
カラムの幅を%で指定。
100%にならない場合は自動設定される。

垂直配置を変更
カラムのツールーバーから変更
通常は上。

縦位置を上に.is-vertically-aligned-top
縦位置を中央に.is-vertically-aligned-center
縦位置を下に.is-vertically-aligned-bottom

aaa

bbb

ccc

ddd

eee

fff

<div class="wp-block-columns">
	<div class="wp-block-column is-vertically-aligned-bottom">
		<p></p>
	</div>
	<div class="wp-block-column is-vertically-aligned-center">
		<p></p>
	</div>
	<div class="wp-block-column is-vertically-aligned-top">
		<p></p>
	</div>
</div>

スタイル設定

標準スタイル

.wp-block-columns {
    display: flex;
    margin-bottom: 28px;
    flex-wrap:wrap
}

@media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap:nowrap
    }
}

.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap:break-word
}

@media (max-width: 599px) {
    .wp-block-column {
        flex-basis:100% !important
    }
}

@media (min-width: 600px) {
    .wp-block-column {
        flex-basis: calc(50% - 16px);
        flex-grow:0
    }

    .wp-block-column:nth-child(2n) {
        margin-left:32px
    }
}

@media (min-width: 782px) {
    .wp-block-column:not(:first-child) {
        margin-left:32px
    }
}

.wp-block-columns.are-vertically-aligned-top {
    align-items:flex-start
}

.wp-block-columns.are-vertically-aligned-center {
    align-items:center
}

.wp-block-columns.are-vertically-aligned-bottom {
    align-items:flex-end
}

.wp-block-column.is-vertically-aligned-top {
    align-self:flex-start
}

.wp-block-column.is-vertically-aligned-center {
    -ms-grid-row-align: center;
    align-self:center
}

.wp-block-column.is-vertically-aligned-bottom {
    align-self:flex-end
}

ブロック制御コメント

<!-- wp:columns -->
<div class="wp-block-columns">
	<!-- wp:column -->
	<div class="wp-block-column"></div>
	<!-- /wp:column -->
	<!-- wp:column -->
	<div class="wp-block-column"></div>
	<!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns">
	<!-- wp:column {"width":33.33} -->
	<div class="wp-block-column" style="flex-basis:33.33%"></div>
	<!-- /wp:column -->
	<!-- wp:column {"width":66.66} -->
	<div class="wp-block-column" style="flex-basis:66.66%"></div>
	<!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns">
	<!-- wp:column {"width":25} -->
	<div class="wp-block-column" style="flex-basis:25%"></div>
	<!-- /wp:column -->
	<!-- wp:column {"width":50} -->
	<div class="wp-block-column" style="flex-basis:50%"></div>
	<!-- /wp:column -->
	<!-- wp:column {"width":25} -->
	<div class="wp-block-column" style="flex-basis:25%"></div>
	<!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":null} -->
<div class="wp-block-columns">
	<!-- wp:column {"verticalAlignment":"bottom"} -->
	<div class="wp-block-column is-vertically-aligned-bottom"></div>
	<!-- /wp:column -->
	<!-- wp:column {"verticalAlignment":"center"} -->
	<div class="wp-block-column is-vertically-aligned-center"></div>
	<!-- /wp:column -->
	<!-- wp:column {"verticalAlignment":"top"} -->
	<div class="wp-block-column is-vertically-aligned-top"></div>
	<!-- /wp:column -->
</div>
<!-- /wp:columns -->