మూస:Flex wrap centre/doc
మూస:Strong for మూస:Terminate sentence It may contain usage information, categories and other content that is not part of the original మూస page. |
This template uses TemplateStyles: |
This template uses block elements, e.g. See H:DIVSPAN for details. |
Usage
[మార్చు]Produces a simple flex-box layout that allows content to be displayed side-by-side on wide screens and containers, but have it wrap "responsively" on narrow screens or containers.
This often happens when images are side-by-side, and do not fix on narrow screens, such as phones and e-readers, but can also but used in general for any content which was originally side-by-side but can be usefully wrapped on a small screen.
Additionally, images in the cells will be rescaled proportionally to not exceed the cell boundaries and "spill out" over other content or off the screen.
Parameters
[మార్చు]- 1, 2, 3, 4: the context of each child "cell"
- Styling
- align: text alignment of the whole structure Optional, default:
center
. - max-width: max-width of the whole structure to for wrapping before 100% page width. Optional, default: not set.
- align-items: alignment of cells on the cross-axis (usually vertical). Any valid CSS for
align-items
, but most useful arestretch
(default),flex-begin
,center
andflex-end
(align top, middle and bottom, respectively). - align-content: behaviour of cells on the cross-axis (usually vertical) when there is more than one row. Any valid CSS for
align-content
. - class, style: extra CSS classes and styles for the parent container. Optional.
- child_class, child_style: extra CSS class an styles to apply to every child cell. Optional.
- child_classN, child_styleN (where N is 1,2,3,..): extra CSS class an styles to apply to individual child cells. Optional.
- align: text alignment of the whole structure Optional, default:
CSS
[మార్చు]- The parent container has the class
_flex_wrap_centre
- Each child has the class
_flex_child
By default, a 0.5em margin is applied to each child cell to keep images slightly apart. This can be overridden either by adding the class _no_margin
to the children (with child_class, etc.), or by manually setting the margin as needed with child_style, etc..
Split usage
[మార్చు]There is a split template pair, {{flex wrap centre/s}} and {{flex wrap centre/e}}, which can be used to open the flex environment. Within this environment, block elements (e.g. <div>
and tables) will be flexibly wrapped. You can use the class _flex_child
to apply the default child padding, or you can do this manually if that is not suitable.
Other child formatting (child_class, etc.) has to be applied manually in this case - only the parent-level parameters can be passed to {{flex wrap centre/s}}.
Examples
[మార్చు]Example: Wide container
Example: Narrow container
In a narrow container, the content wraps as needed:
<div style="width:400px; margin:auto; border:1px solid red;"> {{flex wrap centre | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]] Caption A | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]] Caption B }} </div>
Example: Image auto scaling
In a very narrow container, the content wraps as needed, and the images shrink so as not to overspill the container:
<div style="width:150px; margin:auto; border:1px solid red;"> {{flex wrap centre | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]] Caption A | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]] Caption B }} </div>
Example: Styles
Add styles to the parent and children:
{{flex wrap centre | style = border: 1px double blue; | child_style = background-color:grey; | child_style1 = border: 1px solid red; | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]] | [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px]] }} </div>
Split template example
[మార్చు]Use the split template to make it easier to use table markup, which is otherwise awkward to place within a template parameter.
{{flex wrap centre/s}} {| class="wikitable _flex_child" | This || is || a | colspan=3 | table |} <div class="_flex_child" style="background-color:lightgrey;"> This is a a div. Padding is provided by <code>_flex child</code> [[File:Old man's wish (circa. 1813-1820) - page 1.png|250px|center]] </div> {{flex wrap centre/e}} </div>
This | is | a | table |
This is a a div.
Padding is provided by _flex child
See also
[మార్చు]- {{block centre}} for centering a single block in the page.
- {{div col}} for columns of content where the break-point don't need to be set manually