More than 3 years have passed since last update.

【備忘録】li要素を横並びに均等に並べる方法

Posted at 2021-02-14

htmlにおいて、liの要素を横並びで均等に並べたい時はflexを利用する。
htmlが次の通りの時、

<ul class="list">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

CSSを下記の通り記述する。

.list {
  display: flex;
}

.list li {
  flex: auto;
}

ちなみにリストごとに色をつけて表示するとわかりやすい。

HTMLファイル

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="index.css"/>
  </head>
  <body>
  <ul class="list">
    <li class="l1">list1</li>
    <li class="l2">list2</li>
    <li class="l3">list3</li>
  </ul>
  </body>
</html>

CSSファイル

.list {
    display: flex;
}

.list li {
    flex: auto;
    height: 20vh;
    list-style-type: none;
    color: white;
}

.l1 {
    background: red;
}

.l2 {
    background: blue;
}

.l3 {
    background: green;
}

こんな感じになる。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up