Skip to content
Permalink
trunk
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
.wp-block-columns {
display: flex;
margin-bottom: 1.75em;
box-sizing: border-box;
// Responsiveness: Allow wrapping on mobile.
flex-wrap: wrap;
@include break-medium() {
flex-wrap: nowrap;
}
&:where(.has-background) {
padding: $block-bg-padding--v $block-bg-padding--h;
}
/**
* All Columns Alignment
*/
&.are-vertically-aligned-top {
align-items: flex-start;
}
&.are-vertically-aligned-center {
align-items: center;
}
&.are-vertically-aligned-bottom {
align-items: flex-end;
}
&:not(.is-not-stacked-on-mobile) > .wp-block-column {
@media (max-width: #{ ($break-small - 1) }) {
// Responsiveness: Show at most one columns on mobile. This must be
// important since the Column assigns its own width as an inline style.
flex-basis: 100% !important;
}
// Between mobile and large viewports, allow 2 columns.
@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
// Only add two column styling if there are two or more columns
&:not(:only-child) {
// As with mobile styles, this must be important since the Column
// assigns its own width as an inline style, which should take effect
// starting at `break-medium`.
flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
flex-grow: 0;
}
// Add space between the multiple columns. Themes can customize this if they wish to work differently.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
&:nth-child(even) {
margin-left: var(--wp--style--block-gap, 2em);
}
}
// At large viewports, show all columns horizontally.
@include break-medium() {
// Available space should be divided equally amongst columns without an
// assigned width. This is achieved by assigning a flex basis that is
// consistent (equal), would not cause the sum total of column widths to
// exceed 100%, and which would cede to a column with an assigned width.
// The `flex-grow` allows columns to maximally and equally occupy space
// remaining after subtracting the space occupied by columns with
// explicit widths (if any exist).
flex-basis: 0;
flex-grow: 1;
// Columns with an explicitly-assigned width should maintain their
// `flex-basis` width and not grow.
&[style*="flex-basis"] {
flex-grow: 0;
}
// When columns are in a single row, add space before all except the first.
&:not(:first-child) {
margin-left: var(--wp--style--block-gap, 2em);
}
}
}
&.is-not-stacked-on-mobile {
flex-wrap: nowrap;
> .wp-block-column {
// Available space should be divided equally amongst columns.
flex-basis: 0;
flex-grow: 1;
// Columns with an explicitly-assigned width should maintain their
// `flex-basis` width and not grow.
&[style*="flex-basis"] {
flex-grow: 0;
}
// When columns are in a single row, add space before all except the first.
&:not(:first-child) {
margin-left: var(--wp--style--block-gap, 2em);
}
}
}
}
.wp-block-column {
flex-grow: 1;
// Prevent the columns from growing wider than their distributed sizes.
min-width: 0;
// Prevent long unbroken words from overflowing.
word-break: break-word; // For back-compat.
overflow-wrap: break-word; // New standard.
/**
* Individual Column Alignment
*/
&.is-vertically-aligned-top {
align-self: flex-start;
}
&.is-vertically-aligned-center {
align-self: center;
}
&.is-vertically-aligned-bottom {
align-self: flex-end;
}
&.is-vertically-aligned-top,
&.is-vertically-aligned-center,
&.is-vertically-aligned-bottom {
width: 100%;
}
}