https://github.com/sv443/flex-wrap-example
A pure CSS flexbox, responsive, always left-aligned, auto-wrapping grid of 1-dimensional items
https://github.com/sv443/flex-wrap-example
css css-examples css-flexbox example flexbox
Last synced: 5 months ago
JSON representation
A pure CSS flexbox, responsive, always left-aligned, auto-wrapping grid of 1-dimensional items
- Host: GitHub
- URL: https://github.com/sv443/flex-wrap-example
- Owner: Sv443
- License: wtfpl
- Created: 2024-01-30T10:32:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-28T10:17:13.000Z (over 1 year ago)
- Last Synced: 2024-11-12T04:51:43.130Z (about 1 year ago)
- Topics: css, css-examples, css-flexbox, example, flexbox
- Language: JavaScript
- Homepage: https://www.sv443.me/flex-wrap-example/
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
## A pure CSS flexbox, responsive, always left-aligned, auto-wrapping grid of 1-dimensional items
[Click here to open the demo page](https://www.sv443.me/flex-wrap-example/)
The code is licensed under the [WTFPL license](./LICENSE.txt), so you can do whatever you want with it.
### Features:
- Columns are always aligned
- Rows are always left-aligned
- Items wrap automatically on smaller screens
- Items are always the same width and height, unless the container can span its full width
### Configuration:
- Open the [`index.html`](./index.html) in your browser and use the input fields to configure item size and amount
- Edit the values in the top `.container` block inside [`index.css`](./index.css) to change container size, amount of items per row and more