ショートハンドflexの練習

基本HTMLコード


<ul class="content">
  <li class="first">A</li>
  <li class="second">B</li>
  <li class="third">>C</li>
</ul>

基本CSSコード


.content{
    display:flex;
    flex-direction:row;
    width:80%;
    margin: auto;
}
.section{
        width:200px;
}

CSS設定

flexの値を入力してください。
.first{ flex: 　} .second{ flex: 　} .third{ flex: 　}

全て整数を入力したら下のボタンをクリックしてください。

結果表示

A
B
C

ボックスA,B,Cのflexアイテムとなる .first, .second, .thirdに対するCSSの指定は以下のとおりです。

CSSの指定なし