<meta charset="utf-8">

<title>CSS Flexbox Test: gap - rl wrap vertical</title>

<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">

<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">

<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">

<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">

<link rel="match" href="gap-007-rl-ref.html">

<meta name="assert" content="The 'gap' property enables putting space exclusively between items">

body {

writing-mode: vertical-rl;

}

section {

background-color: green;

block-size: 100px;

inline-size: 200px;

display: inline-flex;

flex-direction: column;

flex-wrap: wrap;

gap: 20px;

line-height: 18px;

}

section > div{

background-color: grey;

color: white;

}

<p>Test passes if there are <strong> green lines between boxes</strong>.</p>

<section>

<div>Black Panther</div>

<div>Wonder Woman</div>

<div>Storm</div>

<div>Flash</div>

</section>