Flex examples #558
Flex examples #558
Conversation
| @@ -0,0 +1,36 @@ | |||
| <section id="example-choice-list" class="example-choice-list large" data-property="flex-basis"> | |||
|
|
|||
There was a problem hiding this comment.
Super nit: remove empty line for consistency with other files.
schalkneethling
left a comment
There was a problem hiding this comment.
Some nits and a few suggestions. This is going to be so useful to so many people! Thanks @rachelandrew
| </div> | ||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
Super nit: remove empty lines for consistency with other files.
| @@ -0,0 +1,41 @@ | |||
| <section id="example-choice-list" class="example-choice-list large" data-property="flex-direction"> | |||
|
|
|||
There was a problem hiding this comment.
Super nit: remove empty line for consistency with other files.
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
Super nit: remove empty line for consistency with other files.
| @@ -0,0 +1,44 @@ | |||
| <section id="example-choice-list" class="example-choice-list large" data-property="flex-flow"> | |||
|
|
|||
There was a problem hiding this comment.
Super nit: remove empty line for consistency with other files.
| <span class="visually-hidden">Copy to Clipboard</span> | ||
| </button> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
Super nit: remove empty line for consistency with other files.
| @@ -0,0 +1,36 @@ | |||
| <section id="example-choice-list" class="example-choice-list large" data-property="flex-shrink"> | |||
|
|
|||
There was a problem hiding this comment.
Super nit: remove empty line for consistency with other files.
| </div> | ||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
Super nit: remove empty lines for consistency with other files.
| <div id="output" class="output large hidden"> | ||
| <section id="default-example" class="default-example"> | ||
| <div class="example-container"> | ||
| <div id="example-element" class="transition-all">Item One</div> |
There was a problem hiding this comment.
I am wondering, could we title this one as "I grow"? Makes it clearer that the flex-grow rule is applied to this specific element.
| <div id="output" class="output large hidden"> | ||
| <section id="default-example" class="default-example"> | ||
| <div class="example-container"> | ||
| <div id="example-element" class="transition-all">Item One</div> |
There was a problem hiding this comment.
I am wondering, could we title this one as "I shrink"? Makes it clearer that the flex-shrink rule is applied to this specific element.
| </div> | ||
|
|
||
| <div class="example-choice"> | ||
| <pre><code class="language-css">flex-shrink: 3;</code></pre> |
There was a problem hiding this comment.
Maybe these could be? Thoughts @rachelandrew @wbamberg
flex-shrink: 0;flex-shrink: 1;flex-shrink: 2;
* upstream/master: Adding list-style css example. (mdn#547) Flex examples (mdn#558) Add column examples (mdn#549) Remove CSS example id attributes (mdn#556) Add various text examples (mdn#545) Add contribution item (mdn#552) Adds @helmutgranda as contributor (mdn#550) Adding border radius example with recommended changes. (mdn#546) Add `quotes` example (mdn#543)
Examples for: