flex项目的百分比宽度的替代 [英] alternatives for percentage width on flex items
问题描述
我想创建自己的网格系统。
这样做只是为了了解flex的工作原理。
我已经创建了网格确定，但我已经使用百分比在每个col的宽度，但我不认为这是正确的方法。
例如，我想对内容执行2/3宽度，对侧栏执行1/3。
除了在导航和标题中给我错误的百分比之外，有没有更好的方法来执行此操作
如果有人想了解为什么？
< hr>
请注意，flexbox规范建议使用 flex-grow 作为 flex 速记属性。
鼓励作者使用
flex
速记，而不是直接使用其longhand属性，因为
速记正确地重置任何未指定的组件以适应
常见用途。
有关 flex-grow 如何工作的详细说明，请参阅此帖子：
使用 flex 属性指的是常见值的汇总规范。
I am trying to create my own grid system.
Doing this to just learn how flex works.
I have created the grid OK but I have used percentages for the width in each col however I don't think this is the correct way.
For example I would like to do 2/3 width for content and 1/3 for side bar.
Is there a better way to do this other than the percentages that are giving me errors in the navigation and header
I would love it if someone has an idea as to why?
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 -->
Consider using the flex-grow property for sizing flex items. This property tells flex items what amount of free space in the container they should absorb.
Here are some examples of how flex-grow distributes space in a row:
Note that the flexbox spec recommends using flex-grow as part of the flex shorthand property.
Authors are encouraged to control flexibility using the
flexshorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
For a detailed description of how flex-grow works, see this post:
When working with the flex property refer to the spec for a summary of common values.
这篇关于flex项目的百分比宽度的替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
