8000 Add single properties · Fcmam5/css-reference@fc704c0 · GitHub
Skip to content

Commit fc704c0

Browse files
jgthmsjgthms
committed
Add single properties
1 parent d4a5b6f commit fc704c0

131 files changed

Lines changed: 14622 additions & 3 deletions

File tree

  • property

    • Some content is hidden

    Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

    ‎.gitignore‎

    Lines changed: 0 additions & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -15,4 +15,3 @@ _gh_pages
    1515
    _site
    1616
    images/trash
    1717
    node_modules
    18-
    property

    ‎_includes/lists/main-list.html‎

    Lines changed: 2 additions & 2 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1402,7 +1402,7 @@ <h2 class="property-name">
    14021402

    14031403
    </header>
    14041404

    1405-
    <style type="text/css">.background-attachment { background-image: url(/images/landscape.png);background-position: center center;background-size: cover;height: 200px; }</style>
    1405+
    <style type="text/css">.background-attachment { background-image: url(/images/landscape.jpg);background-position: center center;background-size: cover;height: 200px; }</style>
    14061406

    14071407

    14081408
    <style type="text/css">.background-attachment p { background: white;padding: 0.8em 1em; }</style>
    @@ -2245,7 +2245,7 @@ <h2 class="property-name">
    22452245

    22462246
    </header>
    22472247

    2248-
    <style type="text/css">.background-size { background-image: url(/images/landscape.png);background-repeat: no-repeat;height: 150px;padding: 0; }</style>
    2248+
    <style type="text/css">.background-size { background-image: url(/images/landscape.jpg);background-repeat: no-repeat;height: 150px;padding: 0; }</style>
    22492249

    22502250

    22512251

    ‎images/landscape.jpg‎

    73.5 KB
    Loading

    ‎property/align-content/index.html‎

    Lines changed: 163 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,163 @@
    1+
    ---
    2+
    layout: single
    3+
    property_name: align-content
    4+
    ---
    5+
    6+
    <section id="align-content" class="property">
    7+
    <header class="property-header">
    8+
    <nav class="property-links">
    9+
    <a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property" target="_blank">Link</a>
    10+
    <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-content">Share</a>
    11+
    <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    12+
    </nav>
    13+
    <h2 class="property-name">
    14+
    <a href="{{site.url}}/#align-content"><span>#</span>align-content</a>
    15+
    </h2>
    16+
    <div class="property-description">
    17+
    <p>Defines how each line is aligned within a flexbox container. It only applies if <code>flex-wrap: wrap</code> is present, and if there are <strong>multiple lines</strong> of flexbox items.</p>
    18+
    19+
    </div>
    20+
    21+
    </header>
    22+
    23+
    <style type="text/css">.align-content { background: hsl(0, 0%, 95%);display: flex;flex-wrap: wrap;height: 300px;padding: 0; }</style>
    24+
    25+
    26+
    <style type="text/css">.align-content .square { height: 46px;margin: 2px;width: 30%; }.align-content .square:nth-child(2) { height: 96px; }.align-content .box { height: 150px;left: 0;position: absolute;right: 0;top: 0; }.align-content .box.is-red:before { content: "First line"; }.align-content .box.is-green { top: 150px; }.align-content .box.is-green:before { content: "Second line"; }</style>
    27+
    28+
    29+
    <section class="example">
    30+
    <header class="example-header">
    31+
    <p class="example-name">
    32+
    <code class="example-default" data-tooltip="This is the property's default value">default</code>
    33+
    34+
    35+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: stretch;">align-content: stretch;</code>
    36+
    </p>
    37+
    <div class="example-description">
    38+
    <p>Each line will stretch to <em>fill</em> the remaining space.</p>
    39+
    <p>In this case, the container is <code>300px</code> high. All boxes are <code>50px</code> high, apart from the second one who is <code>100px</code> high.</p>
    40+
    41+
    </div>
    42+
    </header>
    43+
    44+
    <aside class="example-preview">
    45+
    <div class="example-browser"><i></i><i></i><i></i></div>
    46+
    <div class="example-output">
    47+
    <div class="example-output-div align-content " id="align-content-stretch"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
    48+
    </div>
    49+
    </aside>
    50+
    <style type="text/css">#align-content-stretch{ align-content:stretch;}</style>
    51+
    </section>
    52+
    <section class="example">
    53+
    <header class="example-header">
    54+
    <p class="example-name">
    55+
    56+
    57+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-start;">align-content: flex-start;</code>
    58+
    </p>
    59+
    <div class="example-description">
    60+
    <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>start</strong> of the flexbox container&#39;s cross axis.</p>
    61+
    62+
    </div>
    63+
    </header>
    64+
    65+
    <aside class="example-preview">
    66+
    <div class="example-browser"><i></i><i></i><i></i></div>
    67+
    <div class="example-output">
    68+
    <div class="example-output-div align-content " id="align-content-flex-start"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
    69+
    </div>
    70+
    </aside>
    71+
    <style type="text/css">#align-content-flex-start{ align-content:flex-start;}</style>
    72+
    <style type="text/css">#align-content-flex-start .box.is-red { height: 100px; }#align-content-flex-start .box.is-green { height: 50px;top: 100px; }</style>
    73+
    </section>
    74+
    <section class="example">
    75+
    <header class="example-header">
    76+
    <p class="example-name">
    77+
    78+
    79+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-end;">align-content: flex-end;</code>
    80+
    </p>
    81+
    <div class="example-description">
    82+
    <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>end</strong> of the flexbox container&#39;s cross axis.</p>
    83+
    84+
    </div>
    85+
    </header>
    86+
    87+
    <aside class="example-preview">
    88+
    <div class="example-browser"><i></i><i></i><i></i></div>
    89+
    <div class="example-output">
    90+
    <div class="example-output-div align-content " id="align-content-flex-end"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
    91+
    </div>
    92+
    </aside>
    93+
    <style type="text/css">#align-content-flex-end{ align-content:flex-end;}</style>
    94+
    <style type="text/css">#align-content-flex-end .box.is-red { height: 100px;top: 150px; }#align-content-flex-end .box.is-green { height: 50px;top: 250px; }</style>
    95+
    </section>
    96+
    <section class="example">
    97+
    <header class="example-header">
    98+
    <p class="example-name">
    99+
    100+
    101+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: center;">align-content: center;</code>
    102+
    </p>
    103+
    <div class="example-description">
    104+
    <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>center</strong> of the flexbox container&#39;s cross axis.</p>
    105+
    106+
    </div>
    107+
    </header>
    108+
    109+
    <aside class="example-preview">
    110+
    <div class="example-browser"><i></i><i></i><i></i></div>
    111+
    <div class="example-output">
    112+
    <div class="example-output-div align-content " id="align-content-center"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
    113+
    </div>
    114+
    </aside>
    115+
    <style type="text/css">#align-content-center{ align-content:center;}</style>
    116+
    <style type="text/css">#align-content-center .box.is-red { height: 100px;top: 75px; }#align-content-center .box.is-green { height: 50px;top: 175px; }</style>
    117+
    </section>
    118+
    <section class="example">
    119+
    <header class="example-header">
    120+
    <p class="example-name">
    121+
    122+
    123+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-between;">align-content: space-between;</code>
    124+
    </p>
    125+
    <div class="example-description">
    126+
    <p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em> space will appear <strong>between</strong> the lines.</p>
    127+
    128+
    </div>
    129+
    </header>
    130+
    131+
    <aside class="example-preview">
    132+
    <div class="example-browser"><i></i><i></i><i></i></div>
    133+
    <div class="example-output">
    134+
    <div class="example-output-div align-content " id="align-content-space-between"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
    135+
    </div>
    136+
    </aside>
    137+
    <style type="text/css">#align-content-space-between{ align-content:space-between;}</style>
    138+
    <style type="text/css">#align-content-space-between .box.is-red { height: 100px;top: 0; }#align-content-space-between .box.is-green { height: 50px;top: 250px; }</style>
    139+
    </section>
    140+
    <section class="example">
    141+
    <header class="example-header">
    142+
    <p class="example-name">
    143+
    144+
    145+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-around;">align-content: space-around;</code>
    146+
    </p>
    147+
    <div class="example-description">
    148+
    <p>Each line will only fill the space it <em>needs</em>. The BE68 <em>remaining</em> space will be distributed equally <strong>around</strong> the lines: before the first line, between the two, and after the last one.</p>
    149+
    150+
    </div>
    151+
    </header>
    152+
    153+
    <aside class="example-preview">
    154+
    <div class="example-browser"><i></i><i></i><i></i></div>
    155+
    <div class="example-output">
    156+
    <div class="example-output-div align-content " id="align-content-space-around"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
    157+
    </div>
    158+
    </aside>
    159+
    <style type="text/css">#align-content-space-around{ align-content:space-around;}</style>
    160+
    <style type="text/css">#align-content-space-around .box.is-red { height: 100px;top: 38px; }#align-content-space-around .box.is-green { height: 50px;top: 213px; }</style>
    161+
    </section>
    162+
    163+
    </section>

    ‎property/align-items/index.html‎

    Lines changed: 145 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,145 @@
    1+
    ---
    2+
    layout: single
    3+
    property_name: align-items
    4+
    ---
    5+
    6+
    <section id="align-items" class="property">
    7+
    <header class="property-header">
    8+
    <nav class="property-links">
    9+
    <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Link</a>
    10+
    <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
    11+
    <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    12+
    </nav>
    13+
    <h2 class="property-name">
    14+
    <a href="{{site.url}}/#align-items"><span>#</span>align-items</a>
    15+
    </h2>
    16+
    <div class="property-description">
    17+
    <p>Defines how flexbox items are aligned according to the <strong>cross</strong> axis, within a line of a flexbox container.</p>
    18+
    19+
    </div>
    20+
    21+
    </header>
    22+
    23+
    <style type="text/css">.align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style>
    24+
    25+
    26+
    <style type="text/css">.align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }</style>
    27+
    28+
    29+
    <section class="example">
    30+
    <header class="example-header">
    31+
    <p class="example-name">
    32+
    33+
    34+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-start;">align-items: flex-start;</code>
    35+
    </p>
    36+
    <div class="example-description">
    37+
    <p>The flexbox items are aligned at the <strong>start</strong> of the <strong>cross axis</strong>.</p>
    38+
    <p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p>
    39+
    40+
    </div>
    41+
    </header>
    42+
    43+
    <aside class="example-preview">
    44+
    <div class="example-browser"><i></i><i></i><i></i></div>
    45+
    <div class="example-output">
    46+
    <div class="example-output-div align-items " id="align-items-flex-start"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
    47+
    </div>
    48+
    </aside>
    49+
    <style type="text/css">#align-items-flex-start{ align-items:flex-start;}</style>
    50+
    4D58 <style type="text/css">#align-items-flex-start .line { top: 0; }</style>
    51+
    </section>
    52+
    <section class="example">
    53+
    <header class="example-header">
    54+
    <p class="example-name">
    55+
    56+
    57+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-end;">align-items: flex-end;</code>
    58+
    </p>
    59+
    <div class="example-description">
    60+
    <p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p>
    61+
    <p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the _bottom.</p>
    62+
    63+
    </div>
    64+
    </header>
    65+
    66+
    <aside class="example-preview">
    67+
    <div class="example-browser"><i></i><i></i><i></i></div>
    68+
    <div class="example-output">
    69+
    <div class="example-output-div align-items " id="align-items-flex-end"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
    70+
    </div>
    71+
    </aside>
    72+
    <style type="text/css">#align-items-flex-end{ align-items:flex-end;}</style>
    73+
    <style type="text/css">#align-items-flex-end .line { bottom: 0; }</style>
    74+
    </section>
    75+
    <section class="example">
    76+
    <header class="example-header">
    77+
    <p class="example-name">
    78+
    79+
    80+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: center;">align-items: center;</code>
    81+
    </p>
    82+
    <div class="example-description">
    83+
    <p>The flexbox items are aligned at the <strong>center</strong> of the <strong>cross axis</strong>.</p>
    84+
    <p>By default, the cross axis is vertical. This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p>
    85+
    86+
    </div>
    87+
    </header>
    88+
    89+
    <aside class="example-preview">
    90+
    <div class="example-browser"><i></i><i></i><i></i></div>
    91+
    <div class="example-output">
    92+
    <div class="example-output-div align-items " id="align-items-center"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
    93+
    </div>
    94+
    </aside>
    95+
    <style type="text/css">#align-items-center{ align-items:center;}</style>
    96+
    <style type="text/css">#align-items-center .line { top: 50%; }</style>
    97+
    </section>
    98+
    <section class="example">
    99+
    <header class="example-header">
    100+
    <p class="example-name">
    101+
    102+
    103+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: baseline;">align-items: baseline;</code>
    104+
    </p>
    105+
    <div class="example-description">
    106+
    <p>The flexbox items are aligned at the <strong>baseline</strong> of the <strong>cross axis</strong>.</p>
    107+
    <p>By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the <em>baseline</em> of their <em>text</em> align along a horizontal line.</p>
    108+
    109+
    </div>
    110+
    </header>
    111+
    112+
    <aside class="example-preview">
    113+
    <div class="example-browser"><i></i><i></i><i></i></div>
    114+
    <div class="example-output">
    115+
    <div class="example-output-div align-items " id="align-items-baseline"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
    116+
    </div>
    117+
    </aside>
    118+
    <style type="text/css">#align-items-baseline{ align-items:baseline;}</style>
    119+
    <style type="text/css">#align-items-baseline .line { top: 55px; }</style>
    120+
    </section>
    121+
    <section class="example">
    122+
    <header class="example-header">
    123+
    <p class="example-name">
    124+
    125+
    126+
    <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: stretch;">align-items: stretch;</code>
    127+
    </p>
    128+
    <div class="example-description">
    129+
    <p>The flexbox items will stretch across the whole <strong>cross axis</strong>.</p>
    130+
    <p>By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.</p>
    131+
    132+
    </div>
    133+
    </header>
    134+
    135+
    <aside class="example-preview">
    136+
    <div class="example-browser"><i></i><i></i><i></i></div>
    137+
    <div class="example-output">
    138+
    <div class="example-output-div align-items " id="align-items-stretch"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
    139+
    </div>
    140+
    </aside>
    141+
    <style type="text/css">#align-items-stretch{ align-items:stretch;}</style>
    142+
    <style type="text/css">#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch .line { display: none; }</style>
    143+
    </section>
    144+
    145+
    </section>

    0 commit comments

    Comments
     (0)