mirror of
https://github.com/cjcenizal/flexbox-patterns.git
synced 2025-08-24 08:33:06 +02:00
Compare commits
4 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
a455706b56 | ||
|
7f03ade1f7 | ||
|
9b5c57a4d2 | ||
|
ac3799a277 |
@@ -18,3 +18,10 @@ This command will concatenate the source CSS files into a single CSS file, and
|
|||||||
then use PostCSS to add various vendor-prefixed properties. Open up
|
then use PostCSS to add various vendor-prefixed properties. Open up
|
||||||
`dist/index.html` to see a demo page of the various flexbox patterns in the
|
`dist/index.html` to see a demo page of the various flexbox patterns in the
|
||||||
browser.
|
browser.
|
||||||
|
|
||||||
|
## Things to keep in mind
|
||||||
|
|
||||||
|
_I don't recommend copy-pasting these examples directly into production code._
|
||||||
|
I'm only trying to demonstrate different ways of using flexbox through these
|
||||||
|
examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the `role` attribute). Before using this
|
||||||
|
code in production you should make sure it meets your accessibility needs.
|
||||||
|
4
dist/styles.css
vendored
4
dist/styles.css
vendored
@@ -568,11 +568,11 @@
|
|||||||
*
|
*
|
||||||
* We'll also set flex-grow to 1 so that it
|
* We'll also set flex-grow to 1 so that it
|
||||||
* will expand to fill its container. (The
|
* will expand to fill its container. (The
|
||||||
* default value is 1.)
|
* default value is 0.)
|
||||||
*
|
*
|
||||||
* We'll set flex-shrink to 1 so that the element
|
* We'll set flex-shrink to 1 so that the element
|
||||||
* will shrink as its container gets smaller.
|
* will shrink as its container gets smaller.
|
||||||
* (The default value is 0.)
|
* (The default value is 1.)
|
||||||
*
|
*
|
||||||
* Last, we set flex-basis to 0 so that its
|
* Last, we set flex-basis to 0 so that its
|
||||||
* size is solely determined by the size of
|
* size is solely determined by the size of
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "flexbox-patterns",
|
"name": "flexbox-patterns",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"description": "Patterns for using flexbox CSS to build awesome UI components",
|
"description": "Patterns for using flexbox CSS to build awesome UI components",
|
||||||
"repository": "cjcenizal/flexbox-patterns",
|
"repository": "cjcenizal/flexbox-patterns",
|
||||||
"author": {
|
"author": {
|
||||||
|
@@ -19,11 +19,11 @@
|
|||||||
*
|
*
|
||||||
* We'll also set flex-grow to 1 so that it
|
* We'll also set flex-grow to 1 so that it
|
||||||
* will expand to fill its container. (The
|
* will expand to fill its container. (The
|
||||||
* default value is 1.)
|
* default value is 0.)
|
||||||
*
|
*
|
||||||
* We'll set flex-shrink to 1 so that the element
|
* We'll set flex-shrink to 1 so that the element
|
||||||
* will shrink as its container gets smaller.
|
* will shrink as its container gets smaller.
|
||||||
* (The default value is 0.)
|
* (The default value is 1.)
|
||||||
*
|
*
|
||||||
* Last, we set flex-basis to 0 so that its
|
* Last, we set flex-basis to 0 so that its
|
||||||
* size is solely determined by the size of
|
* size is solely determined by the size of
|
||||||
|
Reference in New Issue
Block a user