【CSS】flex-basisを使ってFlexboxのリストのずれを解消する方法

2019年6月7日

今回は、親要素をFlexboxとしたときに、子要素であるリストがずれたときの対処法について書いていきたいと思います。

対処法としては、子要素のリストに対して、「flex-basis」を使います。

「flex-basis」については既に各所で解説はされているので恐縮ではありますが、平たくいうと親要素に対する子要素の幅です。

修正前の画像は以下のイメージです。「治療内容」と「よくある質問」の行頭がずれています。

修正後は以下のようになります。

コード

親要素をulとします。ulはCSSで以下のようにフレックスボックス化されているとします。

ul{
    display: flex;
    flex-wrap: wrap;
}

次に、本題の子要素についてですが、冒頭で述べた通り「flex-basis」を使います。

それぞれの行に2つのリスト要素が存在するので、「flex-basis:50%」とします。

ul li{
    flex-basis:50%;
}

以上の記述で、修正後の画像の状態となります。