Skip to content

Instantly share code, notes, and snippets.

@rickychilcott

rickychilcott/example-flexbox-row.html

Created June 3, 2020 19:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rickychilcott/492e7be4f16d117c14fc3665db1ee4ec to your computer and use it in GitHub Desktop.
Save rickychilcott/492e7be4f16d117c14fc3665db1ee4ec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example-flexbox-row.html
<div class="container">
<div class="d-flex flex-row mb-3 align-items-start">
<div class="d-inline-flex align-items-center">
<div class="m-1 p-1" style="height:15px; border: 1px solid;"></div>
<div class="m-1 p-1" style="height:20px; border: 1px solid;"></div>
<div class="m-1 p-1" style="height:15px; border: 1px solid;"></div>
</div>
<div class="p-1 bd-highlight">
<div class="d-flex flex-column">
<div class="px-1 mx-1" style="height:50px; border: 1px solid;">Top</div>
<div class="px-1 mx-1" style="height:40px; border: 1px solid;">Bottom</div>
</div>
</div>
<div class="p-1 bd-highlight ml-auto">
<div class="d-inline-flex align-items-center">
<div class="px-1 mx-1" style="height:40px; border: 1px solid;">Flex item 2</div>
<div class="px-1 mx-1" style="height:35px; border: 1px solid;">Flex item 3</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment