如何确定没有百分比的flex-items？ [英] How to size flex-items without percentages?

查看：83 发布时间：2017/12/17 20:29:18 html css css3 flexbox

本文介绍了如何确定没有百分比的flex-items？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建基于flexbox的网格，其内容为2/3宽度，侧栏剩余1/3。

我已经使用了每个列的宽度的百分比，不幸的是在导航和标题中给了我错误。

这是为什么？我怎样才能做到这一点，而不使用百分比，以避免错误？

属性来确定弹性项目的大小。这个属性告诉flex项目它们应该吸收的容器中有多少可用空间。

下面是 flex-grow 在一行中分配空间：

< data-lang =truedata-console =false>

.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;背景颜色：aqua; } .container：nth-child（2）> .box：nth-child（2）{flex-grow：7;背景颜色：橙色; } .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;背景颜色：黄色; } .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;背景颜色：棕褐色; } .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;背景颜色：aqua; } .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;背景颜色：黄色; } body {display：flex; flex-direction：column; align-items：center;}。container {display：flex;宽度：95％;填充：5px; border：1px solid #ccc; background-color：lightyellow;}。box {height：50px; background-color：lightgreen; border：1px solid #aaa;显示：flex; justify-content：center; align-items：center;} < div class = 容器 > < 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`

 
 
 
 
 
 请注意，flexbox规范建议使用 flex-grow    flex  速记属性。
 
    7.2 
的灵活性灵活性  
 
 
鼓励使用 flex  
来简化控制灵活性，而不是直接使用它的longhand属性，因为
简写正确地重置任何未指定的组件以容纳
 常见用途 。 
 
 
 
 
 
 
 有关 flex-grow 的工作，看到这个职位：
 
 
  
    flex-grow不按预期大小弹性项目大小  
  
 
 
 
 
 当使用 flex 属性时，请参考规范以获取常见值的摘要。
 
 
  
    7.1 0.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?

CodePen demo



@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.

  7.2 Components of
  Flexibility
  
  Authors are encouraged to control flexibility using the flex
  shorthand 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:


flex-grow not sizing flex items as expected




When working with the flex property refer to the spec for a summary of common values.


7.1.1. Common Values of flex


                        这篇关于如何确定没有百分比的flex-items？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

如何确定没有百分比的flex-items？ [英] How to size flex-items without percentages?

问题描述

`jsFiddle demo`

jsFiddle demo

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何确定没有百分比的flex-items？ [英] How to size flex-items without percentages?

问题描述

jsFiddle demo

jsFiddle demo

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

`jsFiddle demo`

登录关闭