doc_flexbox_specific_cases.html (2586B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <style> 4 @font-face { 5 font-family: Ahem; 6 src: url("Ahem.ttf"); 7 } 8 .container { 9 width: 300px; 10 height: 150px; 11 margin: 10px; 12 display: flex; 13 } 14 .container.column { 15 height: 300px; 16 width: 150px; 17 flex-direction: column; 18 } 19 .item { 20 background: #0004; 21 } 22 .shrinking .item { 23 flex-basis: 500px; 24 flex-shrink: 1; 25 } 26 .shrinking.is-clamped .item { 27 min-width: 350px; 28 } 29 .growing .item { 30 flex-basis: 200px; 31 flex-grow: 1; 32 } 33 .growing.is-clamped .item { 34 max-width: 250px; 35 } 36 37 #want-to-grow-more-than-max { 38 width: 500px; 39 display: flex; 40 } 41 #want-to-grow-more-than-max div { 42 flex: 1; 43 max-width: 200px; 44 } 45 46 #did-not-grow-or-shrink { 47 width: 500px; 48 display: flex; 49 } 50 #did-not-grow-or-shrink div { 51 flex: 0 300px; 52 } 53 54 #just-enough-space-for-clamped-items { 55 display:flex; 56 width:100px; 57 height:40px 58 } 59 #just-enough-space-for-clamped-items div:first-child { 60 flex: 1 300px; 61 max-width: 20px; 62 background: teal; 63 } 64 #just-enough-space-for-clamped-items div:last-child { 65 flex: 1 10px; 66 min-width: 80px; 67 background: salmon; 68 } 69 70 #wanted-to-shrink-more-than-basis { 71 display: flex; 72 width: 5px; 73 } 74 #wanted-to-shrink-more-than-basis div:first-child { 75 flex: 0 2 200px; 76 /* Using the Ahem test font to make sure the text has the exact same size on all test 77 platforms */ 78 font-family: Ahem; 79 font-size: 10px; 80 } 81 #wanted-to-shrink-more-than-basis div:last-child { 82 flex: 0 1 200px; 83 } 84 </style> 85 <div id="container" class="container"> 86 <div class="item">flex item in a row flex container</div> 87 </div> 88 <div class="container column"> 89 <div class="item">flex item in a column flex container</div> 90 </div> 91 <div class="container shrinking"> 92 <div class="item">Shrinking flex item</div> 93 </div> 94 <div class="container shrinking is-clamped"> 95 <div class="item">Shrinking and clamped flex item</div> 96 </div> 97 <div class="container growing"> 98 <div class="item">Growing flex item</div> 99 </div> 100 <div class="container growing is-clamped"> 101 <div class="item">Growing and clamped flex item</div> 102 </div> 103 <div id="want-to-grow-more-than-max"> 104 <div>item wants to grow more</div> 105 </div> 106 <div id="did-not-grow-or-shrink"> 107 <div>item did not grow or shrink</div> 108 </div> 109 <div id="just-enough-space-for-clamped-items"> 110 <div></div> 111 <div></div> 112 </div> 113 <div id="wanted-to-shrink-more-than-basis"> 114 <div>item wants to shrink more than its basis</div> 115 <div></div> 116 </div> 117 <div class="container" id="container-only"> 118 <div class="container" id="container-and-item"> 119 <div id="item-only">This item is inside a container-item element</div> 120 </div> 121 </div>