フレックスボックスの配置CSS( justify-content）

2022-01-19

justify-content

ディスプレイフレックスのときの配置

右端に配置したいときの記入

 justify-content: flex-end;

使用例

.navi{
    display: flex;
    list-style-type: none;
    justify-content: flex-end;
}

.navi li{
    background-color: saddlebrown; 
    color: white;
    padding: 10px 30px;
    margin-left: 10px;
}

等間隔で配置したい時

 justify-content:  space-between;

使用例

.navi{
    display: flex;
    list-style-type: none;
    justify-content:  space-between;
}