Question

I just started learning HTML and CSS, and I am building a website for practice. I finally got my header to look how I wanted it but now it gets all messed up when I resize the window to be smaller. I am using flex-box and I have two navigation links on the left, a title/logo in the center, and social media icons/links on the right.

1440 x 900 Window

Shrunken down Window

CODE:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Genesis Barrios musician website">
    <meta name="keywords" content="musician, music producer, singer, artist">
    <meta name="author" content="Genesis Barrios">
    <title> Genesis Barrios | Home</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700|Rajdhani:700" rel="stylesheet">
</head>
<body>
    <header class="header-container">
        <nav>
            <div class="nav">
                <a href="#" class="home">HOME</a>   
                <a href="about.html">ABOUT</a>
            </div>
            <div>
            <h1>GENESIS BARRIOS</h1>
        </div>
            <div class="social">
                <a href="https://www.youtube.com/genesisbarrios" target="_blank" class="fab fa-youtube fa-2x"></a>
                <a href="https://www.soundcloud.com/genesisbarrios" target="_blank" class="fab fa-soundcloud fa-2x"></a>
                <a href="https://www.instagram.com/renaissancegen" target="_blank" class="fab fa-instagram fa-2x"></a>
                <a href="https://https://open.spotify.com/artist/5p2tmJU9R8sopvcXdXBbsV" target="_blank" class="fab fa-spotify fa-2x"></a>
            </div>
        </nav>
    </header>
    <div id="video">
        <iframe src="https://www.youtube.com/embed/fbancNa0kwI"></iframe>
    </div>
    <footer>
        <p>Genesis Barrios Copyright &copy; 2018</p>
    </footer>

</body>
</html>

CSS:

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html, body{
    background-color: #040404;
    height:100%;
    width:100%;
}

header{
    background-color: #040404;
    min-height:80px;
    width:100%;
    height:20%
}

nav{
    display: flex;
    width:100%;
    height:100%;
    flex-direction:row;
    align-items: center;
}

a{
  text-decoration: none;
  color: white;
}

.nav{
    font-family: 'PT Sans Narrow', sans-serif;
    font-size:30px;
    display: flex;
    margin-right:auto;
    padding: 0 1%;
}

h1{
    font-family: 'Rajdhani', sans-serif;
    font-size: 70px;
    color:#1ed2f4;
    display: flex;
}

.social{
    display: flex;
    margin-left: auto;
    margin-right: 4%;
 }

.fa-spotify, .fa-instagram, .fa-soundcloud{
    margin-left:10%;
}

.home{
    margin-right:50%;
}

#video{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

iframe{
    position: absolute;
    width:100%;
    height: 100%;
    border:0;
}

footer{
    background-color:#040404;
    color:#ffffff;
    font-family: 'PT Sans Narrow', sans-serif;
    height:10%;
    width:100%;
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
}

.fa{
    color:blue;
}

a:hover{
    color:#1ed2f4;
}

Answer 1

我可能会为您的Flexbox样式执行以下操作。你真的不需要＆＃34; flex＆＃34;关于每个元素。

nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}
.nav, .social {
    display: flex;  
    flex: 0;
    justify-content: flex-start;
}

您并不需要在flexbox元素之间设置边距设置。如果设置正确，Flexbox会处理间距。您可能只需要在nav-tag元素周围留出一些空格。

另外，为您的GENESIS BARRIOS设置响应式字体变体。 70px太大会出现溢出问题。即使有文字包装，这样的大字体也不容易适应，而且flexbox只能做这么多。

也许默认大小可能是28px，然后是一些条件样式，如......

@media (min-width: 768px) {
    h1 {font-size: 36px;}
}
@media(min-width: 992px) {
    h1 {font-size: 70px;}
}

另一个可能棘手的选择是使用基于视口宽度（vw）的字体大小......但是我说这可能很棘手，有时会引起奇怪。

How to make this flex box navigation menu dynamic

1 个答案: