rqrauhvmra__flex
Advanced tools
Readme
Simple grid system based on Flexbox.
CSS: css/flex.min.css minified, or css/flex.css un-minified
npm: npm install rqrauhvmra__flex --save
.flex defines a flex container. It enables a flex context for all its direct children, which are called flex items.
Different column sizes can be defined by using .flex__*.
<div class="container">
<div class="flex flex--column">
<div class="flex__20"></div>
<div class="flex__25"></div>
<div class="flex__33"></div>
<div class="flex__50"></div>
<div class="flex__66"></div>
<div class="flex__75"></div>
<div class="flex__80"></div>
<div class="flex__100"></div>
</div>
</div>
.flex__auto creates a column that will take up however much space is left.
<div class="container">
<div class="flex">
<div class="flex__auto"></div>
<div class="flex__auto"></div>
</div>
</div>
Offset a column by adding an offset class.
<div class="container">
<div class="flex flex--column">
<div class="flex--offset-20"></div>
<div class="flex--offset-25"></div>
<div class="flex--offset-33"></div>
<div class="flex--offset-50"></div>
<div class="flex--offset-66"></div>
<div class="flex--offset-75"></div>
<div class="flex--offset-80"></div>
</div>
</div>
The grid system lets you create responsive layouts easily by giving you the option to define different column widths for each viewport. The viewports are determined by 4 different breakpoints.
Viewport >= 500px
.flex__sm-*.flex--offset-sm-*Viewport >= 700px
.flex__md-*.flex--offset-md-*Viewport >= 1000px
.flex__lg-*.flex--offset-lg-*Viewport >= 1200px
.flex__xl-*.flex--offset-xl-*<div class="container">
<div class="flex flex--wrap">
<div class="flex__md-50 flex__lg-25"></div>
<div class="flex__md-50 flex__lg-25"></div>
<div class="flex__md-50 flex__lg-25"></div>
<div class="flex__md-50 flex__lg-25"></div>
</div>
</div>
The flex items have horizontal padding to create the gutters between individual flex items. You can remove the margin from the flex container and the padding from the flex items with .flex--no-gutters.
<div class="container">
<div class="flex flex--no-gutters">
<div class="flex__50"></div>
<div class="flex__50"></div>
</div>
</div>
To nest your content with the default grid, add a new .flex and set of .flex__* columns within an existing .flex__* column.
<div class="container">
<div class="flex">
<div class="flex__33"></div>
<div class="flex__66">
<div class="flex">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
</div>
</div>
flex-direction defines the direction in which the flex items are placed in the flex container.
This is the default value. Left to right in ltr and right to left in rtl.
<div class="container">
<div class="flex flex--row">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
Setting the direction to row-reverse. Right to left in ltr and left to right in rtl.
<div class="container">
<div class="flex flex--row-reverse">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
.flex--column behaves the same way as .flex--row but top to bottom.
<div class="container">
<div class="flex flex--column">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
.flex--column-reverse behaves the same way as .flex--row-reverse but bottom to top.
<div class="container">
<div class="flex flex--column-reverse">
<div class="flex__33"></div>
<div class="flex__66"></div>
</div>
</div>
flex-wrap defines whether the flex items are forced in a single line or can be wraped into multiple lines.
This is the default value, the flex items will not wrap.
<div class="container">
<div class="flex flex--nowrap">
<div class="flex__50"></div>
<div class="flex__66"></div>
</div>
</div>
The flex items will wrap if necessary.
<div class="container">
<div class="flex flex--wrap">
<div class="flex__50"></div>
<div class="flex__66"></div>
</div>
</div>
The flex items will wrap if necessary but in reverse order.
<div class="container">
<div class="flex flex--wrap-reverse">
<div class="flex__50"></div>
<div class="flex__66"></div>
</div>
</div>
justify-content defines how flex items are aligned along the main axis. It helps distribute extra space between the items when they don't reached their maximum size.
This is the default value, the flex items are positioned at the beginning of the container.
<div class="container">
<div class="flex flex--left">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
The flex items are positioned at the end of the container.
<div class="container">
<div class="flex flex--right">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
The flex items are positioned at the center of the container.
<div class="container">
<div class="flex flex--center">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
The flex items are evenly spread horizontally, the first item is at the beginning of the container, the last item on the end of the container. The space gets distributed between the flex items.
<div class="container">
<div class="flex flex--space-between">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
The flex items are positioned with equal space before, between and after them.
<div class="container">
<div class="flex flex--space-around">
<div class="flex__25"></div>
<div class="flex__25"></div>
<div class="flex__25"></div>
</div>
</div>
align-items defines how flex items are aligned along the cross axis when they don't reached their maximum size. It is the justify-content version for the cross axis.
This is the default value, it stretches the height of the flex items to fill the container but still respects min-width and max-width.
<div class="container">
<div class="flex flex--stretch">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
The flex items are positioned at the top of the container.
<div class="container">
<div class="flex flex--top">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
The flex items are positioned at the bottom of the container.
<div class="container">
<div class="flex flex--bottom">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
The flex items are positioned at the vertical center of the container.
<div class="container">
<div class="flex flex--middle">
<div class="flex__33"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
align-self accepts the same values as align-items, with the difference that you apply it to individual flex items in order to overwrite align-items.
This is the default value, it stretches the height of the flex item to fill the container but still respects min-width and max-width.
<div class="container">
<div class="flex flex--top">
<div class="flex__33 flex--stretch"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
The flex item gets positioned at the top of the container.
<div class="container">
<div class="flex">
<div class="flex__33 flex--top"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
The flex item gets positioned at the bottom of the container.
<div class="container">
<div class="flex">
<div class="flex__33 flex--bottom"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
The flex item gets positioned at the vertical center of the container.
<div class="container">
<div class="flex">
<div class="flex__33 flex--middle"></div>
<div class="flex__33"></div>
<div class="flex__33"></div>
</div>
</div>
If you do anything interesting with this code, please let me know. I'd love to see it.
FAQs
A simple grid system based on Flexbox.
The npm package rqrauhvmra__flex receives a total of 0 weekly downloads. As such, rqrauhvmra__flex popularity was classified as not popular.
We found that rqrauhvmra__flex demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.