<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<h1>LTR</h1>
<div class="container" dir="ltr">
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
<div class="child">D</div>
<div class="child">E</div>
<div class="child">F</div>
<div class="child">G</div>
<div class="child">H</div>
<div class="child">I</div>
<div class="child">J</div>
</div>
</div>
<br />
<h1>RTL</h1>
<div class="container" dir="rtl">
<div class="parent">
<div class="child">א</div>
<div class="child">ב</div>
<div class="child">ג</div>
<div class="child">ד</div>
<div class="child">ה</div>
<div class="child">ו</div>
<div class="child">ז</div>
<div class="child">ח</div>
<div class="child">ט</div>
<div class="child">י</div>
</div>
</div>
</body>
</html>
// Add your code here
@import './flex-gap-mixin.scss';
@mixin box($width, $background) {
width: $width;
background: $background;
}
body {
text-align: center;
}
.container {
outline: 2px dashed gray;
justify-content: center;
@include flex-gap(10px, 25px);
}
.parent {
justify-content: center;
}
.child {
height: 70px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 30px;
font-family: "Helvetica";
&:nth-child(3n) {
@include box(100px, #D8CEF6);
}
&:nth-child(3n + 1) {
@include box(50px, #CEF6F5);
}
&:nth-child(3n + 2) {
@include box(75px, #F3E2A9);
}
}
@mixin flex-gap($row-gap, $column-gap: $row-gap) {
display: flex;
& > * {
display: flex;
flex-wrap: wrap;
margin-top: -$column-gap;
}
& > * > * {
display: flex;
margin-top: $column-gap;
}
&:not([dir='rtl']) {
& > * {
margin-left: -$row-gap;
}
& > * > * {
margin-left: $row-gap;
}
}
&[dir='rtl'] {
& > * {
margin-right: -$row-gap;
}
& > * > * {
margin-right: $row-gap;
}
}
}