【Lavender's Blog】十年之约

Lavender's Blog

博主寄语: 假作真时真亦假,真作假时假亦真

查看TA的网站

最新文章

CSS:FlexFroggy学习Flex布局

<div class="note primary"> <p>FlexFroggy:练习 CSS 中 Flex 布局的游戏式网站,网站:<span class="exturl" data-url="aHR0cDovL2ZsZXhib3hmcm9nZ3kuY29tLyN6aC1jbg==">FLEXBOX FROGGY</span></p> </div> <h2 id="flex布局"><a class="anchor" href="#flex布局">#</a> Flex 布局</h2> <p>任意一个容器设置为 <code>display:flex;</code> 或者 <code>display:inline-flex</code> 时,为 Flex 布局,此时子元素的 <code>float</code> 、 <code>clear</code> 和 <code>vertical-align</code> 属性将失效。</p> <p>具体介绍参考阮一峰大佬的博客:<span class="exturl" data-url="aHR0cDovL3d3dy5ydWFueWlmZW5nLmNvbS9ibG9nLzIwMTUvMDcvZmxleC1ncmFtbWFyLmh0bWw=">Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)</span></p> <h2 id="题目详解"><a class="anchor" href="#题目详解">#</a> 题目详解</h2> <ol> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123132737898.png" alt="image-20211123132737898" /><br /> 本题用到了 flex 布局的 justify-content 属性,答案是 <span class="gap">justify-content: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end</pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123140405573.png" alt="image-20211123140405573" /></p> <ul> <li><code>flex-start</code> : 元素和容器的左端对齐。</li> <li><code>flex-end</code> : 元素和容器的右端对齐。</li> <li><code>center</code> : 元素在容器里居中。</li> <li><code>space-between</code> : 元素之间保持相等的距离。</li> <li><code>space-around</code> : 元素周围保持相等的距离。</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141752108.png" alt="image-20211123141752108" /> 本题用到了 flex 布局的 justify-content 属性,答案是 <span class="gap">justify-content: center;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> center</pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123140551997.png" alt="image-20211123140551997" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141123871.png" alt="image-20211123141123871" /> 本题用到了 flex 布局的 justify-content 属性,答案是 <span class="gap">justify-content: space-around;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141218635.png" alt="image-20211123141218635" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141301155.png" alt="image-20211123141301155" /> 本题用到了 flex 布局的 justify-content 属性,答案是 <span class="gap">justify-content: space-between;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141347259.png" alt="image-20211123141347259" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141445419.png" alt="image-20211123141445419" /> 本题用到了 flex 布局的 align-items 属性,答案是 <span class="gap">align-items: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141529066.png" alt="image-20211123141529066" /></p> <ul> <li><code>flex-start</code> : 元素与容器的顶部对齐。</li> <li><code>flex-end</code> : 元素与容器的底部对齐。</li> <li><code>center</code> : 元素纵向居中。</li> <li><code>baseline</code> : 元素在容器的基线位置显示。</li> <li><code>stretch</code> : 元素被拉伸以填满整个容器。</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141726972.png" alt="image-20211123141726972" /> 本题用到了 flex 布局的 justify-content 和 align-items 属性,答案是 <span class="gap">justify-content: center;align-items:center</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123141639792.png" alt="image-20211123141639792" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123142209648.png" alt="image-20211123142209648" /> 本题用到了 flex 布局的 justify-content 和 align-items 属性,答案是 <span class="gap">justify-content: space-around;align-items: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123142307110.png" alt="image-20211123142307110" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123142603089.png" alt="image-20211123142603089" /> 本题用到了 flex 布局的 flex-direction 属性,答案是 <span class="gap">flex-direction: row-reverse;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123142644428.png" alt="image-20211123142644428" /></p> <ul> <li><code>row</code> : 元素摆放的方向和文字方向一致。</li> <li><code>row-reverse</code> : 元素摆放的方向和文字方向相反。</li> <li><code>column</code> : 元素从上放到下。</li> <li><code>column-reverse</code> : 元素从下放到上。</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123142734765.png" alt="image-20211123142734765" /> 本题用到了 flex 布局的 flex-direction 属性,答案是 <span class="gap">flex-direction: column;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123142815160.png" alt="image-20211123142815160" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123142907802.png" alt="image-20211123142907802" /> 本题用到了 flex 布局的 justify-content 和 flex-direction 属性,答案是 <span class="gap">flex-direction: row-reverse;justify-content: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143017871.png" alt="image-20211123143017871" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143103384.png" alt="image-20211123143103384" /> 本题用到了 flex 布局的 justify-content 和 flex-direction 属性,答案是 <span class="gap">flex-direction: column;justify-content: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143230506.png" alt="image-20211123143230506" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143307804.png" alt="image-20211123143307804" /> 本题用到了 flex 布局的 justify-content 和 flex-direction 属性,答案是 <span class="gap">flex-direction: column-reverse;justify-content: space-between;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143507164.png" alt="image-20211123143507164" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143536610.png" alt="image-20211123143536610" /> 本题用到了 flex 布局的 justify-content、align-items 和 flex-direction 属性,答案是 <span class="gap">flex-direction: row-reverse;justify-content: center;align-items: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143724725.png" alt="image-20211123143724725" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143812403.png" alt="image-20211123143812403" /> 本题用到了 flex 布局的 order 属性,答案是 <span class="gap">order: 1;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">order</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143857203.png" alt="image-20211123143857203" /></p> <ul> <li>有时候仅仅调转行或列的方向是不够的。在这些情况,我们可以设置单个元素的 order 属性。元素的属性默认值为 0,但是我们设置这个属性为正数或负数。</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123143925187.png" alt="image-20211123143925187" /> 本题用到了 flex 布局的 order 属性,答案是 <span class="gap">order: -1;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">order</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144017523.png" alt="image-20211123144017523" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144203359.png" alt="image-20211123144203359" /> 本题用到了 flex 布局的 align-self 属性,答案是 <span class="gap">align-self: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">align-self</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144301043.png" alt="image-20211123144301043" /></p> <ul> <li>可以使用的控制单个元素的属性</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144328074.png" alt="image-20211123144328074" /> 本题用到了 flex 布局的 order 和 align-self 属性,答案是 <span class="gap">order: 1;align-self: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">order</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">align-self</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144431268.png" alt="image-20211123144431268" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144457686.png" alt="image-20211123144457686" /> 本题用到了 flex 布局的 flex-wrap 属性,答案是 <span class="gap">flex-wrap: wrap;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144605347.png" alt="image-20211123144605347" /></p> <ul> <li><code>nowrap</code> : 所有的元素都在一行。</li> <li><code>wrap</code> : 元素自动换成多行。</li> <li><code>wrap-reverse</code> : 元素自动换成逆序的多行。</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144650126.png" alt="image-20211123144650126" /> 本题用到了 flex 布局的 flex-direction 和 flex-wrap 属性,答案是 <span class="gap">flex-direction: column;flex-wrap: wrap;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144756957.png" alt="image-20211123144756957" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144827762.png" alt="image-20211123144827762" /> 本题用到了 flex 布局的 flex-flow 属性,答案是 <span class="gap">flex-flow: column wrap;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-flow</span><span class="token punctuation">:</span> column wrap<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123144937456.png" alt="image-20211123144937456" /></p> <ul> <li>flex-direction 和 flex-wrap 两个属性经常会一起使用,所以有缩写属性 flex-flow。这个缩写属性接受两个属性的值,两个值中间以空格隔开。</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145009063.png" alt="image-20211123145009063" /> 本题用到了 flex 布局的 align-content 属性,答案是 <span class="gap">align-content: flex-start;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">align-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145107701.png" alt="image-20211123145107701" /></p> <ul> <li><code>flex-start</code> : 多行都集中在顶部。</li> <li><code>flex-end</code> : 多行都集中在底部。</li> <li><code>center</code> : 多行居中。</li> <li><code>space-between</code> : 行与行之间保持相等距离。</li> <li><code>space-around</code> : 每行的周围保持相等距离。</li> <li><code>stretch</code> : 每一行都被拉伸以填满容器。</li> </ul> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145133389.png" alt="image-20211123145133389" /> 本题用到了 flex 布局的 align-content 属性,答案是 <span class="gap">align-content: flex-end;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">align-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145219815.png" alt="image-20211123145219815" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145240783.png" alt="image-20211123145240783" /> 本题用到了 flex 布局的 flex-direction 和 align-content 属性,答案是 <span class="gap">flex-direction: column-reverse;align-content: center;</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145358628.png" alt="image-20211123145358628" /></p> </blockquote> </li> <li class="quiz fill"> <p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145433481.png" alt="image-20211123145433481" /> 本题答案是 <span class="gap">答案见下方</span>。</p> <blockquote> <figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap-reverse<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre><span class="token property">align-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span></pre></td></tr></table></figure><p><img data-src="https://gitee.com/lavender816/image-bed/raw/master/img/image-20211123145628593.png" alt="image-20211123145628593" /></p> </blockquote> </li> </ol>

大事记

2021/11/24

加入十年之约

共有 0 条评论

添加新评论取消回复

Ready to do something?

十年之约是一个非盈利项目,如果你想帮助这样一个活动更好的走下去,下面的按钮或许适合你。