14 HTMLとCSS講座 HTML/CSS編 display:flex を検証！

yoshiko

14HTML/CSS中級となってまいりました。横並びの決定版 disply:flex を使います。12章・13章で紹介したCSS display:flex について細かい設定を行う動画です。display:flex の使い方はまず親要素に書いてその子要素を横並びにさせる形です

はてな？

横ならびというのは、float みたいなもんですか？

yoshiko

そうですねー　<ul><li>HOME</li><li>会社概要</li></ul>などの要素はCSSを入れないと1行単位の要素なので、縦に1行ずつ並びます。それを横に配置するために 親要素の<ul> にdisplay:flexを書きます。

HTML要素

CSSコード

nav ul{
     list-style: none;
     padding-left:0;
     display: flex;
 }
 nav ul li{
     flex:1;
 /*    border-right: 1px solid #000;*/
     text-align: center;
 }
 nav ul li + li {
     border-left: 1px solid #000;
 }
 /*
 nav ul li:last-child{
     border-right: none;
 }
 */
 nav ul li a{
     color: #f00;
     text-decoration: none;
     padding:10px 0;
     display: block;
     background: #ff0;
 }
 nav ul li a:hover{
      background: #000;
     color: #000;
 }