1
我想創建我自己的網格系統。我創建的Flexbox網格是當頁面太小時打破
這樣做只是爲了學習flex如何工作。
我已經創建了網格確定，除了標題以外，所有工作都正常。當頁面太小時，導航會進入徽標。
我會喜歡它，如果有人有一個想法，爲什麼？
http://codepen.io/jonfuller1004/pen/PNowmE?editors=1100
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
*,
*:before,
*:after {
box-sizing: border-box;
}
html body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
p,
a,
li,
ul {
margin: 0;
padding: 0;
}
/* centres content of website in a width of 950px */
.container {
width: 80%;
margin: 0 auto;
}
/* Header styling */
header {
background: #66b3ff;
/* padding: 10px; */
}
/* Logo */
#logo h1 {
font-weight: 300;
margin-top: 30px;
}
#logo h1 span {
font-weight: 600;
}
/* end of Logo */
/* Nav */
nav ul {
margin: 0;
padding: 0;
display: flex;
margin-top: 50px;
}
li {
flex: 1;
list-style: none;
}
a {
text-decoration: none;
}
/* End of header styling */
/* Columns */
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
margin: 0 5px 0 5px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col1 {
width: 8%;
}
.col2 {
width: 16%;
}
.col3 {
width: 25%;
}
.col4 {
width: 33%;
}
.col5 {
width: 41%;
}
.col6 {
width: 50%;
}
.col7 {
width: 58%;
}
.col8 {
width: 66%;
}
.col9 {
width: 75%;
}
.col10 {
width: 83%;
}
.col11 {
width: 91%;
}
.col12 {
width: 100%;
}<!-- Always start with html tag, followed by head and then body -->
<html5>
<!-- In the head tag goes Stylesheet links, script info, meta tags and such -->
<head>
<title>Website title here</title>
</head>
<!-- In the body goes the actual visible content of the website -->
<body>
<!-- Header and other tags like footer, section, nav, video were introduced in HTML5, these help break up the website code and become more readable -->
<!-- It is often useful to wrap content in a container so you can have it centred and use columns. -->
<header>
<div class="container">
<div class="row">
<!-- row -->
<!-- header -->
<div id="logo" class="col col6">
<h1>Bespoke<span>Design</span>Agency</h1>
</div>
<nav class="col col6">
<ul>
<!-- Navigation -->
<li><a href="">HOME</a>
</li>
<li><a href="">ABOUT</a>
</li>
<li><a href="">GALLERY</a>
</li>
<li><a href="">CONTACT</a>
</li>
</ul>
</nav>
<!-- end of Navigation -->
</div>
</div>
<!-- End of container -->
</header>
<!-- end of header -->
<!-- end of row -->
<div class="container mainContentContainer">
<!-- Website CONTENT -->
<div class="row">
<!-- row -->
<!-- Main content -->
<div class="col col8" id="maincontent">
<h1>Main Website content here</h1>
<p>Authentic truffaut put a bird on it tacos crucifix. Kale chips craft beer austin, organic small batch salvia squid. Readymade health goth put a bird on it, yr semiotics shabby chic williamsburg selfies man braid godard. DIY blog lomo selvage.
Pabst echo park tacos, kinfolk chicharrones thundercats farm-to-table offal twee keffiyeh affogato irony helvetica banjo. Bicycle rights XOXO irony mumblecore tofu, keffiyeh kitsch retro plaid seitan street art. Chartreuse ennui helvetica
90's you probably haven't heard of them godard, DIY keffiyeh listicle 3 wolf moon mustache.</p>
</div>
<!-- end of main content -->
<!-- sidebar content -->
<div id="sidebar" class="col col4">
<h1>side bar here</h1>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="row">
<footer class="col col12">
<h1>footer content</h1>
</footer>
</div>
</div>
<!-- end of container -->
</body>
<!-- end of body -->
</html>
<!-- end of html -->
請codepen爲完整的代碼，因爲我無法得到它在這裏 –
嘿夥計，https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 真的足智多謀。去試試看吧。你沒有設置最小寬度（這是很好），並造成這個問題。去設置一個彈性基礎或一個彈性值。 –