如何调整不带百分比的flex项目？

时间：2016-02-26 20:31:16

标签： html css css3 flexbox

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

我已经在每个col中使用了百分比作为宽度，遗憾的是导致我在导航和标题中出现错误。

这是为什么？如何在不使用百分比的情况下实现此目的，以避免错误？

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>

2 个答案:

答案 0 :(得分：6)

考虑使用flex-grow属性来调整弹性项目的大小。此属性告诉flex项目容器中应吸收的可用空间量。

以下是- stat: path=/path/to/something register: p - debug: msg="Path exists and is a directory" when: p.stat.isdir is defined and p.stat.isdir 如何在一行中分配空间的一些示例：

enter image description here

＆＃13;
＆＃13; 
flex-grow
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

jsFiddle demo

请注意，flexbox规范建议将<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>用作flex速记属性的一部分。

  

7.2 Components of Flexibility

     

鼓励作者使用flex-grow控制灵活性   简而言之，而不是直接使用其纵向属性   简写正确地重置任何未指定的组件以适应   common uses

有关flex如何运作的详细说明，请参阅此帖：

使用flex-grow属性时，请参阅规范以获取常见值的摘要。

答案 1 :(得分：1)

对于flexbox，如果设置flex：1;给孩子们，它会均匀喷洒。

2个孩子=平均50％，包括保证金，边境人...... 3个孩子=平均33％...

如果您有2个孩子，并且想要33％/ 66％设置：flex：1;一个和flex：2;对于另一个.or flex：33.33和flex：66.66如果这对你来说更清楚：）

的示例：

＆＃13;
＆＃13; 
.flex {
  display:flex;
}
div div {
  flex:1;
  padding:0.5em;
  border:solid;
  margin:5px;
}
.f2 {
  flex:2;
}
＆＃13; 
<div class="flex">
  <div></div>
  <div></div>
</div>
<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex">
  <div></div>
  <div class="f2"></div>
</div>
<div class="flex">
  <div></div>
  <div class="f2"></div>
  <div></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题