Skip to content

Instantly share code, notes, and snippets.

@inspiran
Created June 13, 2024 10:59
Show Gist options
  • Save inspiran/4d1d4975c3ba430d9c0a07dc6cfcdb34 to your computer and use it in GitHub Desktop.
Save inspiran/4d1d4975c3ba430d9c0a07dc6cfcdb34 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Flex item break</title>
</head>
<body>
<style>
.activities-horizontal-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.ahz-activity-day {
break-inside: avoid;
width: 30%;
padding: 1rem;
border: 1px solid #ccc;
margin: 0 0 1rem 0;
}
</style>
<div class="activities-horizontal-content">
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment