如何在没有百分比的情况下调整弹性项目的大小? [英] How to size flex-items without percentages?
问题描述
我正在尝试创建一个基于 flexbox 的网格，内容为 2/3 宽度，侧边栏为剩余的 1/3.
我在每个列中使用了百分比宽度，不幸的是，这在导航和标题中给了我错误.
这是为什么?我怎样才能在不使用百分比的情况下做到这一点，以避免错误?
.container:nth-child(1) >.box { flex-grow: 1;背景颜色:浅绿色；}.container:nth-child(1) >.box:last-child { 背景颜色:浅粉色；}.container:nth-child(2) >.box:nth-child(1) { flex-grow: 3;背景颜色:浅绿色；}.container:nth-child(2) >.box:nth-child(2) { flex-grow: 7;背景颜色:橙色；}.container:nth-child(2) >.box:nth-child(3) { flex-grow: 1;背景颜色:橙红色；}.container:nth-child(3) >.box:nth-child(1) { flex-grow: 10;背景颜色:黄色；}.container:nth-child(3) >.box:nth-child(2) { flex-grow: 5;背景颜色:浅绿色；}.container:nth-child(3) >.box:nth-child(3) { flex-grow: 1;背景颜色:棕褐色；}.container:nth-child(4) >.box:nth-child(1) { flex-grow: 5;背景色:粉色；}.container:nth-child(4) >.box:nth-child(2) { flex-grow: 10;背景颜色:浅绿色；}.container:nth-child(4) >.box:nth-child(3) { flex-grow: 25;背景颜色:棕褐色；}.container:nth-child(4) >.box:nth-child(4) { flex-grow: 50;背景色:番茄；}.container:nth-child(4) >.box:nth-child(5) { flex-grow: 99;背景颜色:黄色；}身体 {显示:弹性；弹性方向:列；对齐项目:居中；}.容器 {显示:弹性；宽度:95%；填充:5px；边框:1px 实心 #ccc；背景颜色:浅黄色；}.盒子 {高度:50px；背景颜色:浅绿色；边框:1px 实心 #aaa;显示:弹性；对齐内容:居中；对齐项目:居中；}<div class="box"><span>flex-grow: 1</span></div><div class="box"><span>flex-grow: 1</span></div><div class="容器"><div class="box"><span>flex-grow: 3</span></div><div class="box"><span>flex-grow: 7</span></div><div class="box"><span>flex-grow: 1</span></div>
<div class="容器"><div class="box"><span>flex-grow: 10</span></div><div class="box"><span>flex-grow: 5</span></div><div class="box"><span>flex-grow: 1</span></div>
<div class="容器"><div class="box"><span>flex-grow: 5</span></div><div class="box"><span>flex-grow: 10</span></div><div class="box"><span>flex-grow: 25</span></div><div class="box"><span>flex-grow: 50</span></div><div class="box"><span>flex-grow: 99</span></div>
jsFiddle 演示
<小时>请注意，flexbox 规范建议使用 flex-grow 作为 flex 速记属性.
鼓励作者使用 flex 控制灵活性速记而不是直接使用其速记属性，因为速记正确重置任何未指定的组件以适应常见用途.
<小时>
有关 flex-grow 工作原理的详细说明，请参阅此帖子:
使用 flex 属性时，请参阅规范以获取通用值的摘要.
- 7.1.1.
flex 的共同价值
I am trying to create a flexbox-based grid, with the content being 2/3 width and the side bar the remaining 1/3.
I have used percentages for the width in each col, which unfortunately are giving me errors in the navigation and header.
Why is this? And how can I make this without using percentages, to avoid the errors?
@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%;
}
<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>
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:
.container:nth-child(1) > .box { flex-grow: 1; background-color: lightgreen; }
.container:nth-child(1) > .box:last-child { background-color: lightpink; }
.container:nth-child(2) > .box:nth-child(1) { flex-grow: 3; background-color: aqua; }
.container:nth-child(2) > .box:nth-child(2) { flex-grow: 7; background-color: orange; }
.container:nth-child(2) > .box:nth-child(3) { flex-grow: 1; background-color: orangered;}
.container:nth-child(3) > .box:nth-child(1) { flex-grow: 10; background-color: yellow; }
.container:nth-child(3) > .box:nth-child(2) { flex-grow: 5; background-color: lightgreen; }
.container:nth-child(3) > .box:nth-child(3) { flex-grow: 1; background-color: tan; }
.container:nth-child(4) > .box:nth-child(1) { flex-grow: 5; bacground-color: pink; }
.container:nth-child(4) > .box:nth-child(2) { flex-grow: 10; background-color: aqua; }
.container:nth-child(4) > .box:nth-child(3) { flex-grow: 25; background-color: tan; }
.container:nth-child(4) > .box:nth-child(4) { flex-grow: 50; background-color: tomato; }
.container:nth-child(4) > .box:nth-child(5) { flex-grow: 99; background-color: yellow; }
body {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
width: 95%;
padding: 5px;
border: 1px solid #ccc;
background-color: lightyellow;
}
.box {
height: 50px;
background-color: lightgreen;
border: 1px solid #aaa;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="box"><span>flex-grow: 1</span></div>
<div class="box"><span>flex-grow: 1</span></div>
</div>
<div class="container">
<div class="box"><span>flex-grow: 3</span></div>
<div class="box"><span>flex-grow: 7</span></div>
<div class="box"><span>flex-grow: 1</span></div>
</div>
<div class="container">
<div class="box"><span>flex-grow: 10</span></div>
<div class="box"><span>flex-grow: 5</span></div>
<div class="box"><span>flex-grow: 1</span></div>
</div>
<div class="container">
<div class="box"><span>flex-grow: 5</span></div>
<div class="box"><span>flex-grow: 10</span></div>
<div class="box"><span>flex-grow: 25</span></div>
<div class="box"><span>flex-grow: 50</span></div>
<div class="box"><span>flex-grow: 99</span></div>
</div>
jsFiddle demo
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.
这篇关于如何在没有百分比的情况下调整弹性项目的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
