Inline
Puts pieces side by side and wraps when they do not fit.
On this page
Playground
123
Space (gap)
Distribution
Pieces
Background
<div class="feitio-inline" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>When to use
- Whenever there is space between pieces: space belongs to the parent, and only a step of the scale.
When not to use
- For a component’s inner padding: it comes ready.
- With a hand-written margin alongside: never; the check fails it.
Examples
Piece 1Piece 2Piece 3Piece 4
Inline
Four pieces at space-2.
Show code
<div class="feitio-inline" data-gap="2">
…
</div><Inline gap={2}>
…
</Inline>1234567891011121314
Wrapping
When the pieces do not fit, the line wraps, and the same space holds between the lines: nothing touches.
Show code
<div class="feitio-inline" data-gap="3">
…
</div>12
Spread
data-justify="between" takes the first piece to one side and the last to the other, like a heading and its action.
Show code
<div class="feitio-inline" data-gap="3" data-justify="between">
<h2>…</h2>
<button class="feitio-button">…</button>
</div>Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-inline" | required | The layout. |
data-gap | 1 to 7 | The space between pieces. In React, no other value compiles. |
justify | "between", "end" | How pieces spread along the line. |
The rules and a whole form built with all three are in Layout.