css-reference/property/flex-shrink/index.html at master · fangan365/css-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
---
layout: single
property_name: flex-shrink
---

<section id="flex-shrink" class="property">
  <header class="property-header">
    <nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">章节: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/flex-shrink/" data-property-name="flex-shrink" data-tooltip="查看该页面的固定链接">固定链接</a>            <a class="property-share" data-tooltip="分享给其他好友" data-property-name="flex-shrink">分享</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="使用 Can I Use 检查特性支持情况" rel="external">检查特性支持情况</a> <a
            target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-shrink" data-tooltip="Mozilla Developer Network" rel="external">MDN</a></nav>
    <h2 class="property-name">
      <a href="#flex-shrink"><span>#</span>flex-shrink</a>
    </h2>
    <div class="property-description">
      <p>定义了当没有足够空间的时候，元素如何<strong>压缩</strong>自身空间。</p>

    </div>

  </header>

    <style type="text/css">.flex-shrink { background: #310736;border-radius: 3px;display: flex;padding: 1em;width: 300px; }</style>


    <style type="text/css">.flex-shrink .block { flex-shrink: 1; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="这是属性的默认值">默认属性</code>


          <code class="example-value" data-tooltip="点击复制" data-clipboard-text="flex-shrink: 1;">flex-shrink: 1;</code>
        </p>
        <div class="example-description">
          <p>当主轴（横向轴）没有<strong>足够</strong>空间的时候，元素将按照扩展因子 <strong>1</strong> 来进行<strong>压缩</strong>，也将导致换行（折叠）其自身的内容。</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div flex-shrink " id="flex-shrink-1"><p class="block block--alpha"><strong>This is the flex-shrink target</strong><p class="block block--pink">Foo bar</p><p class="block block--yellow">Lorem ipsum</p></div>
        </div>
      </aside>
          <style type="text/css">#flex-shrink-1{ flex-shrink:1;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="点击复制" data-clipboard-text="flex-shrink: 0;">flex-shrink: 0;</code>
        </p>
        <div class="example-description">
          <p>元素<strong>不</strong>压缩：占用它所需要的宽且<strong>不</strong>换行（折叠）自身的内容。同级元素将压缩给出目标元素足够的控件。</p>
<p>因为目标元素不换行（折叠）自身的内容，所以可能会导致 flexbox 容器的内容产生元素移除。</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div flex-shrink " id="flex-shrink-0"><p class="block block--alpha"><strong>This is the flex-shrink target</strong><p class="block block--pink">Foo bar</p><p class="block block--yellow">Lorem ipsum</p></div>
        </div>
      </aside>
          <style type="text/css">#flex-shrink-0{ flex-shrink:0;}</style>
        <style type="text/css">#flex-shrink-0 .block--alpha { flex-shrink: 0; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="点击复制" data-clipboard-text="flex-shrink: 2;">flex-shrink: 2;</code>
        </p>
        <div class="example-description">
          <p>因为 flex-shrink 的值是<strong>相对</strong>的，它的具体表现还取决于此元素的<strong>同级元素</strong>。</p>
<p>在此例子中，绿色的元素占用了 100% 的宽度。此部分的空间将从它的两个同级元素中<strong>占用</strong>，并且占用被分成了 <strong>4</strong>份：</p>
<ul><li>四分之<strong>三</strong>从<strong>红色</strong>元素中获取（红色压缩四分之三）</li><li>四分之<strong>一</strong>从<strong>黄色</strong>元素中获取（黄色压缩四分之一）</li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div flex-shrink " id="flex-shrink-2"><p class="block block--alpha">Width<br><strong>100%</strong><p class="block block--pink">Shrink<br><strong>3</strong></p><p class="block block--yellow">Shrink<br><strong>1</strong></p></div>
        </div>
      </aside>
          <style type="text/css">#flex-shrink-2{ flex-shrink:2;}</style>
        <style type="text/css">#flex-shrink-2 .block--alpha { flex-grow: 1;width: 100%; }#flex-shrink-2 .block--pink { flex-shrink: 3;word-break: break-all; }#flex-shrink-2 .block--yellow { flex-shrink: 1;word-break: break-all; }</style>
    </section>

</section>