スキルテスト: フレックスボックス
このスキルテストの目的は、フレックスボックスとフレックスアイテムがどのように動作するか理解しているかどうかを評価することです。以下にフレックスボックスを使用して作成する 4 つの一般的なデザインパターンを示します。課題はそれらを構築することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
この課題では、リストアイテムはサイトのナビゲーションです。各アイテムの間に等しい空間の大きさで、一列に並べる必要があります。
最終結果は下記の画像のようになるはずです。
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/products">Our Products</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
body {
font: 1.2em / 1.5 sans-serif;
}
nav ul {
max-width: 700px;
list-style: none;
padding: 0;
margin: 0;
}
nav a:link,
nav a:visited {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
display: inline-block;
text-decoration: none;
}
nav ul {
/* ここにスタイルを追加 */
}
ここをクリックすると、模範解答を表示します。
display: flex を適用すると、justify-content プロパティを使用して空間を制御することができます。
nav ul {
display: flex;
justify-content: space-between;
}
課題 2
この課題では、リストアイテムのサイズはすべて異なりますが、それぞれのアイテムにどのようなコンテンツがあっても、 3 つの等しいサイズの段組みとして表示されるようにしてください。
最終結果は下記の画像のようになるはずです。
ボーナス問題: これで最初のアイテムを他のアイテムの 2 倍の大きさにできますか？
<ul>
<li>I am small</li>
<li>I have more content than the very small item.</li>
<li>
I have lots of content. So much content that I don't know where it is all
going to go. I'm glad that CSS is pretty good at dealing with situations
where we end up with more words than expected!
</li>
</ul>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
max-width: 700px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
}
ul {
/* ここにスタイルを追加 */
}
li {
/* ここにスタイルを追加 */
}
ここをクリックすると、模範解答を表示します。
一括指定を使用するのが最善ですので、このシナリオでは flex: 1 が最も適切な答えでしょう。したがって、最適な結果は次のようになります。
ul {
display: flex;
}
li {
flex: 1;
}
ボーナス問題では、最初の要素を対象とし、 flex: 2;（または flex: 2 0 0; または flex-grow: 2）を設定するセレクターを追加します。
li:first-child {
flex: 2;
}
課題 3
この課題では、下記の画像のように、これらのアイテムを行に並べてください。
<ul>
<li>Turnip</li>
<li>greens</li>
<li>yarrow</li>
<li>ricebean</li>
<li>rutabaga</li>
<li>endive</li>
<li>cauliflower</li>
<li>sea lettuce</li>
<li>kohlrabi</li>
<li>amaranth</li>
</ul>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
width: 450px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
margin: 0.5em;
}
ul {
/* ここにスタイルを追加 */
}
li {
/* ここにスタイルを追加 */
}
ここをクリックすると、模範解答を表示します。
この課題では、フレックス行を折り返すための flex-wrap プロパティを理解することが求められます。 さらに、上記の例のような外見にするには、子要素に flex: auto（または flex: 1 1 auto;）を設定する必要があります。
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}