Using flexbox but it's not side by side on Google Chrome

user_14558689 0
Viewed 82

I want to position two elements side by side using flexbox, but on Google Chrome for Windows 10 it's not working.

Prerequisites

flexbox doesn't working.

Expected value

I want to use flexbox to align li tags horizontally.

Reproduction procedure

Run the code below, please.

.header {
    .header__profile-button {
        img {
            width: 120px;
            height: 40px;
        }

    }
}

.header__nav {
    ul {
        display: flex;
        list-style: none;
    }
    li {
        display: block;
    }
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ポートフォリオサイト1</title>
    <link rel="stylesheet" href="./dist/css/header.css" type="text/css">
</head>
<body>
    <header class="header">
        <a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
        <nav class="header__nav">
            <ul>
                <li><a href="" class="header__nav_link">About</a></li>
                <li><a href="" class="header__nav_link">Bicycle</a></li>
            </ul>
        </nav>
    </header>
<!-- Abbreviated below. -->

flexbox css html
4 Answers

You can take your list items out of their list and place your flexbox CSS on your header_nav class:

.header__nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

HTML:

<nav class="header__nav">
        
     <a href="" class="header__nav_link">About</a>
     <a href="" class="header__nav_link">Bicycle</a>
        
 </nav>

Result:

.header {
    .header__profile-button {
        img {
            width: 120px;
            height: 40px;
        }

    }
}

.header__nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
    ul {
        display: flex;
        flex-direction: row;
        
    }
    li {
        display: block;
    }
  
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ポートフォリオサイト1</title>
    <link rel="stylesheet" href="./dist/css/header.css" type="text/css">
</head>
<body>
    <header class="header">
        <a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
        <nav class="header__nav">
            
                <a href="" class="header__nav_link">About</a>
                <a href="" class="header__nav_link">Bicycle</a>
            
        </nav>
    </header>
    <main class="main">
        <div class="main__mainvisual">
            <img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル">
        </div>

        <div class="main__about">
            <p class="main__about-title">About</p>
            <img class="main__profile-icon-image"src="image/about.jpg" alt="プロフィールアイコン">
            <p class="main__name-text">Yusuke Oyama</p>
            <p class="main__introduction-text">
                初めまして。小山優輔と申します。
                KaiYコミュニティという開発コミュニティで、QAエンジニアをやっています。
                自転車と万年筆が大好きです。よろしくお願いいたします。
            </p>
        </div>

        <div class="bicycle">
           <div class="bicycle__bicycle-image">
                <img src="image/bicycle1.jpg" alt="">
           </div> 
           <div class="bicycle__bicycle-image">
                <img src="image/bicycle2.jpg" alt="">
           </div>
           <div class="bicycle__bicycle-image">
                <img src="image/bicycle3.jpg" alt="">
           </div>
        </div>
    </main>
    <footer class="footer">
        <p class="footer__text">
            ©2021 Yusuke Oyama
        </p>
    </footer>
</body>
</html>

user_165964450

Just remove the header__nav wrapping around the ul and li.

.header {
  .header__profile-button {
    img {
      width: 120px;
      height: 40px;
    }
  }
}


ul {
  display: flex;
  list-style: none;
  gap: 60px;
}

li {
  display: block;
}
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ポートフォリオサイト1</title>
  <link rel="stylesheet" href="./dist/css/header.css" type="text/css">
</head>

<body>
  <header class="header">
    <a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
    <nav class="header_nav">
      <ul>
        <li><a href="" class="header__nav_link">About</a></li>
        <li><a href="" class="header__nav_link">Bicycle</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <div class="main__mainvisual">
      <img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル">
    </div>

    <div class="main__about">
      <p class="main__about-title">About</p>
      <img class="main__profile-icon-image" src="image/about.jpg" alt="プロフィールアイコン">
      <p class="main__name-text">Yusuke Oyama</p>
      <p class="main__introduction-text">
        初めまして。小山優輔と申します。 KaiYコミュニティという開発コミュニティで、QAエンジニアをやっています。 自転車と万年筆が大好きです。よろしくお願いいたします。
      </p>
    </div>

    <div class="bicycle">
      <div class="bicycle__bicycle-image">
        <img src="image/bicycle1.jpg" alt="">
      </div>
      <div class="bicycle__bicycle-image">
        <img src="image/bicycle2.jpg" alt="">
      </div>
      <div class="bicycle__bicycle-image">
        <img src="image/bicycle3.jpg" alt="">
      </div>
    </div>
  </main>
  <footer class="footer">
    <p class="footer__text">
      ©2021 Yusuke Oyama
    </p>
  </footer>
</body>

</html>

user_172284840

it is not working because your css is not targeting properly, you are using sass so your li should also go inside ul in your sass like

instead of this,

   .header__nav {
        ul {
            display: flex;
            list-style: none;
        }
        li {
            display: block;
        }
    }

use this, and it will work for sure.

  .header__nav {
        ul {
            display: flex;
            list-style: none;
    
            li {
               display: block;
            }
        }
    }
user_170334320

Use this CSS in your code:

.card {
    display: flex;
    flex-direction: column;
}

.card .content-item {
    flex: 1 1 auto;
}

HTML:

<div class="card">
    <div class="card">
        <div class="content-item">
            <p>What is Lorem Ipsum?</p>
        </div>
    </div>
    <div class="card">
        <div class="content-item">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
        </div>
    </div>
</div>
user_120563680
Related