嵌套的flexbox无法正确显示

时间：2019-03-04 05:18:00

标签： html css css3 flexbox alignment

我是Flexbox初学者。我正在尝试将具有不同参数的Flexbox实施到现有的Flexbox中。 This是我到目前为止所得到的。这就是我想要做的：

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads {}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  background-color: green;
}
<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>

  <div class="ads">
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
  </div>

  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

5 个答案:

答案 0 :(得分：2)

您可以在没有嵌套弹性框的情况下执行此操作-只需调整width的{​​{1}}和margin-参见以下演示：

ads_element
html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads_element {
  width: calc(25% - 15px); /* CHANGED */
  height: 100px;
  background-color: transparent !important; /* CHANGED */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}

如果您不想更改标记，也可以将<div class="container"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <!-- <div class="ads"> --> <div class="ads_element"></div> <div class="ads_element"></div> <div class="ads_element"></div> <div class="ads_element"></div> <!-- </div> --> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div>设置为flexbox-请参见下面的演示

ads
html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads { /* ADDED */
  display: flex;
  width: 100%;
  background: transparent !important;
  
}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  /* background-color: green; */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}

答案 1 :(得分：1)

您需要设置ads的宽度和高度，否则默认情况下，此标签及其内部所有标签的宽度和高度都将为0 

.ads
{
    width: 100%;
  height: 100%;
  display: flex;
}
.ads_element
{
    width: calc(25% - 5px);
    height: 100px;
    background-color:green;
  margin: 10px;
}

将其附加在代码中以查看结果

答案 2 :(得分：1)

我填写了广告类的CSS属性

.ads
{
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
}

在这里https://jsfiddle.net/L5egv0ah/1/

检查工作的小提琴

答案 3 :(得分：1)

使用display：flex和width：100％和背景颜色覆盖来更改下面.ads和.ads_element的css 

html, body 
{
  background-color: #ffeead;
  margin: 10px;
}
.container > div:nth-child(even) 
{
  background-color: red;
}

.container > div:nth-child(odd) 
{
  background-color: blue;
}
.container
{
	max-width: 500px;
	margin: auto;
	border: 5px solid #ffcc5c;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.element
{
    box-sizing: border-box;
    border: 1px solid #edeeee;
    width: calc(50% - 5px);
    margin: 5px 0px;
    height: 200px;
    box-shadow: 0 0 5px 0 #edeeee;
    border-radius: 5px 5px 5px 5px;
}
.container > div:nth-child(odd).ads
{
    width: 100%;
    display: flex;
    background-color: transparent;
}
.ads_element
{
	width: calc(25% - 5px);
	height: 200px;
	border:3px solid red;
  background-color: transparent;
  margin: 0px 5px;
}
<div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>

	<div class="ads"> 
		<div class="ads_element"></div>
		<div class="ads_element"></div>
		<div class="ads_element"></div>
		<div class="ads_element"></div>	
	</div>

    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

答案 4 :(得分：1)

这是您想要做的：

HTML 

<div class="container">
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
    <div class="ads"> 
        <div class="ads_element"></div>
        <div class="ads_element"></div>
        <div class="ads_element"></div>
        <div class="ads_element"></div> 
    </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

CSS 

html, body 
{
  background-color: #ffeead;
  margin: 10px;
}
.container > .element_row > div:nth-child(even) 
{
  background-color: red;
}

.container > .element_row > div:nth-child(odd) 
{
  background-color: blue;
}
.container
{
    max-width: 500px;
    margin: auto;
    border: 5px solid #ffcc5c;
    display: flex;
  flex-flow: column;
}
.element_row{
  display:flex;
  flex-flow:row;
  justify-content: space-between;
}
.element
{
    width: 49%;
    box-sizing: border-box;
    border: 1px solid #edeeee;
    margin: 5px 0px;
    height: 200px;
    box-shadow: 0 0 5px 0 #edeeee;
    border-radius: 5px 5px 5px 5px;
}
.ads
{
    display: flex;
  flex-flow:row;
  justify-content: space-evenly;
}
.ads_element
{
  width: 22%;
    height: 200px;
    border: 3px solid red;
}
相关问题
最新问题