display: flex;が効かない

liを横並びにしたくてdisplay: flex;を書いたのですが効きません。なぜでしょうか？
ブラウザはchromeです。

HTML
1<body>
2	<nav>
3		<ul>
4			<li>a</li>
5			<li>b</li>
6			<li>c</li>
7			<li>d</li>
8		</ul>
9	</nav>
10</body>

CSS
1ul {
2	width: 1000px;
3}
4
5li {
6	display: flex;
7	width: 100px;
8}

行動規範の内容に同意します

回答2件

ベストアンサー

ulに対してdisplay:flex;を設定してください。

投稿2019/03/11 01:53

yuukihayashi

総合スコア147

soft_admin

2019/03/11 02:04

親要素にも設定するのですね。勉強し始めたばかりで分からなかったです。ありがとうございました。

退会済みユーザー

2019/03/11 02:36

＞親要素にも設定するのですね。ごかいしてるかもしれんが、子要素には設定しなくていいんだZE

soft_admin

2019/03/11 11:35

試してみたらその通りでした！

行動規範の内容に同意します

上の方の指摘で適用できるようになるのですが、もうひとつ。
親要素、子要素を意識して考えるとＣＳＳが分かりやすくなるかもです。

display:flex;は親要素に含まれる直下の子要素に対して適用されます。

なので

bodyの子要素であるnavとdivに適用される。
<body style = "display:flex;>
    <nav>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
    </nav>
　　<div>
     <ul>
       <li>a</li>
       <li>b</li>
       <li>c</li>
       <li>d</li>
     </ul>
    </div>
</body>

nav ulとdiv ulの子要素であるliに適用される。

<style>
ul{
  display:flex;
}
</style>

<body>
    <nav>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
    </nav>
　　<div>
     <ul>
       <li>a</li>
       <li>b</li>
       <li>c</li>
       <li>d</li>
     </ul>
    </div>
</body>

という風にこのＣＳＳコードはどの要素に適用されるのかなと考えるといいかもです。

投稿2019/03/11 02:21