容器内的Flexbox忽略正当内容

debugcn 发表于 Dev

艾伦·格兰特（Alan Giant）

我希望在一个柔性容器中的两个div分别占据60％的空间和30％的周围均匀的空间，但是它们被挤得没有空间。

html
<!doctype html>
<html lang="en">
<head>
<title>gameplan.org.uk | A site for enthusiasts by enthusiasts.        
</title>

<link href="test.css" rel="stylesheet">

</head>

<header>Header</header>
<div id='main'>
<article>Player Page
<p>
<div class='playercontainer'>
<div class='playerbox1'>Player Summary</div>
<div class='playerbox2'>Player Details</div>
</div>
</p>
</article>
<nav>Menu</nav>
<aside>Stuff</aside>
</div>
<footer>Footer</footer>
</body>

和CSS：

body {
font: 24px Helvetica;
background: #999999;
color:rgba(0,0,0,.25);
}

#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display:                 flex;
-webkit-flex-flow: row;
flex-flow: row;        
}

#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}

#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}

#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}

header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}

/* Too narrow to support three columns */
@media all and (max-width: 640px) {

#main, #page {
-webkit-flex-flow: column;
flex-flow: column;
}

#main > article, #main > nav, #main > aside {
/* Return them to document order */
-webkit-order: 0;
order: 0;
}

#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}


/*On the flex container*/
.playercontainer {
webkit-inline-flex; /* Safari */
display: inline-flex;     
-webkit-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
-webkit-flex: 3 1 100%;
flex: 3 1 0%;
}

.playerbox1 {
border-style: solid;
border-color: #0000ff;
-webkit-order: 1; /* Safari */
order: 1;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
}


.playerbox2 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%; /* Safari */
flex: 1 1 30%;
-webkit-order: 1; /* Safari */
order: 1;
}

我确定我缺少一些简单的东西，但我无法解决。您可以在此处实时查看代码1

m4n0

您需要在flexbox这里检查两件事

更改display: inline-flex到display: flex内联不走父容器的宽度，但内容的宽度。
设置flex-grow和flex-shrink为0，因为flex-basis已经采取扩张（宽度覆盖）的照顾。

修改后的CSS

.playercontainer {
  display: flex;     
}

.playerbox1 {
  flex-basis: 60%;
}

.playerbox2 {
  flex-basis: 30%;
}

输出：

body {
    font: 24px Helvetica;
    background: #999999;
    color: rgba(0, 0, 0, .25);
  }
  #main {
    min-height: 800px;
    margin: 0px;
    padding: 0px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
  }
  #main > article {
    margin: 4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7pt;
    background: #dddd88;
    -webkit-flex: 3 1 60%;
    flex: 3 1 60%;
    -webkit-order: 2;
    order: 2;
  }
  #main > nav {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 1;
    order: 1;
  }
  #main > aside {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 3;
    order: 3;
  }
  header,
  footer {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 100px;
    border: 1px solid #eebb55;
    border-radius: 7pt;
    background: #ffeebb;
  }
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
    #main,
    #page {
      -webkit-flex-flow: column;
      flex-flow: column;
    }
    #main > article,
    #main > nav,
    #main > aside {/* Return them to document order */
      -webkit-order: 0;
      order: 0;
    }
    #main > nav,
    #main > aside,
    header,
    footer {
      min-height: 50px;
      max-height: 50px;
    }
  }
/*On the flex container*/
  .playercontainer {
    
   
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
    -webkit-flex-wrap: wrap;/* Safari */
    flex-wrap: wrap;
    -webkit-justify-content: center;/* Safari */
    justify-content: center;
    -webkit-justify-content: space-around;/* Safari */
    justify-content: space-around;
  }
  .playerbox1 {
    border-style: solid;
    border-color: #0000ff;
    -webkit-order: 1;/* Safari */
    order: 1;
    -webkit-flex: 0 0 60%;
    flex: 0 0 60%;
  }
  .playerbox2 {
    border-style: solid;
    border-color: #ff0000;
    -webkit-flex: 1 1 30%;
    /* Safari */
    flex: 0 0 30%;
    -webkit-order: 1;
    /* Safari */
    order: 1;
  }

<!doctype html>
<html lang="en">

<head>
  <title>gameplan.org.uk | A site for enthusiasts by enthusiasts.
  </title>

  <link href="test.css" rel="stylesheet">

</head>

<header>Header</header>
<div id='main'>
  <article>Player Page
    <p>
      <div class='playercontainer'>
        <div class='playerbox1'>Player Summary</div>
        <div class='playerbox2'>Player Details</div>
      </div>
    </p>
  </article>
  <nav>Menu</nav>
  <aside>Stuff</aside>
</div>
<footer>Footer</footer>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。