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

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 >
        <a href="index.html" ><img src="image/logo.svg" alt="プロフィール"></a>
        <nav >
            <ul>
                <li><a href="" >About</a></li>
                <li><a href="" >Bicycle</a></li>
            </ul>
        </nav>
    </header>
<!-- Abbreviated below. -->

CodePudding user response：

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 >
        
     <a href="" >About</a>
     <a href="" >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 >
        <a href="index.html" ><img src="image/logo.svg" alt="プロフィール"></a>
        <nav >
            
                <a href="" >About</a>
                <a href="" >Bicycle</a>
            
        </nav>
    </header>
    <main >
        <div >
            <img  src="image/mainvisual (1).jpg" alt="メインビジュアル">
        </div>

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

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

CodePudding user response：

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 >
    <a href="index.html" ><img src="image/logo.svg" alt="プロフィール"></a>
    <nav >
      <ul>
        <li><a href="" >About</a></li>
        <li><a href="" >Bicycle</a></li>
      </ul>
    </nav>
  </header>
  <main >
    <div >
      <img  src="image/mainvisual (1).jpg" alt="メインビジュアル">
    </div>

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

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

</html>

CodePudding user response：

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;
            }
        }
    }

CodePudding user response：

Use this CSS in your code:

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

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

HTML:

<div >
    <div >
        <div >
            <p>What is Lorem Ipsum?</p>
        </div>
    </div>
    <div >
        <div >
            <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>