[スパルタコードクラブ]新年運勢コード(1週目)
851 ワード
ここまでは1週間目のレッスンです.
hoverマウスを使用すると、上のように動物名と背景色が変更されます.
一列に並んでいるのはflexです.
flexは1次元ソートに良いプロパティです.
display:flex(inline-flexもあります)
flex-direction:(スケルトン設定)
row(デフォルト):行軸(左>右)
row-reverse:行軸(右<左)
column:列軸(上>下)
column-reverse:列軸(下>上)
flex-wrap:(コンテナオーバーフロー時に改行するかどうか)
nowrap(デフォルト):コンテナがオーバーフローしたときにねじれて1行として表示
wrap:コンテナオーバーフロー時に改行
flex-flow=flex-direction+flex-wrapは、次のように記述できます.
flex-flow:(flex-direction)(スペース)(flex-wrap);
rivided-内容:スケルトンの位置合わせ(水平位置合わせ)
✔ hover
hoverマウスを使用すると、上のように動物名と背景色が変更されます.
.rtans > a:hover{
background-color: darkred;
}
✔ Flex
一列に並んでいるのはflexです.
flexは1次元ソートに良いプロパティです.
display:flex(inline-flexもあります)
flex-direction:(スケルトン設定)
row(デフォルト):行軸(左>右)
row-reverse:行軸(右<左)
column:列軸(上>下)
column-reverse:列軸(下>上)
flex-wrap:(コンテナオーバーフロー時に改行するかどうか)
nowrap(デフォルト):コンテナがオーバーフローしたときにねじれて1行として表示
wrap:コンテナオーバーフロー時に改行
flex-flow=flex-direction+flex-wrapは、次のように記述できます.
flex-flow:(flex-direction)(スペース)(flex-wrap);
<ソート>
rivided-内容:スケルトンの位置合わせ(水平位置合わせ)
Reference
この問題について([スパルタコードクラブ]新年運勢コード(1週目)), 我々は、より多くの情報をここで見つけました https://velog.io/@knk1088/스파르타코딩클럽-신년운세코딩テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol