html - 如何在没有百分比的情况下调整 flex 元素的大小?

标签 html css flexbox

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

我在每个列中使用了宽度百分比,不幸的是,这给我带来了导航和标题错误。

这是为什么?我如何在不使用百分比的情况下做到这一点,以避免错误?

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>

最佳答案

考虑使用 flex-grow调整 flex 元素大小的属性。这个属性告诉 flex 元素它们应该吸收容器中的多少可用空间。

以下是 flex-grow 如何分配行中空间的一些示例:

enter image description here

.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


请注意,flexbox 规范建议使用 flex-grow 作为 flex 的一部分速记属性。

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.


有关 flex-grow 工作原理的详细说明,请参阅此帖子:


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

关于html - 如何在没有百分比的情况下调整 flex 元素的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35661161/

相关文章:

jquery - Bootstrap 3 Scrollspy 无法与 Affix 和 Panel 一起使用

css - 无法让第一个子选择器工作

jquery - 页面内容不随下拉列表改变?

css - Sass 中的 If/Else 语句根据列表中的元素数更改 css

html - 如何停止嵌入的视频与固定位置标题重叠

jquery - 提交表单后如何显示 Div 并隐藏表单?我试过 jquery 但它不起作用。帮我?

html - 包裹在 flexbox 网格中的 flex 元素的等边距空间

html - 如何在 flexbox flex-column 类 div 中设置高于 100% 的高度?

javascript - jQuery 函数问题

html - iOS7主屏app重置不删除离线数据库