Question

不知道为什么，但是flex-flow: row nowrap似乎并没有阻止Orange div换行。绿色和橙色的div应该并排显示-我在这里做错了什么？橙色的div似乎也没有高度。

在此感谢您的任何帮助。

.appShopSummaryContainer {
	display: flex;
	flex-flow: column wrap;
}
.appShopSummaryProductWrap {
  flex-basis: 100%;
  width: 100%;
  background: pink;
  flex-flow: row nowrap;
  display: flex;
}
.appShopSummaryImg {
	flex-basis: 40%; /* flex: 0 0 40% */
  width: 40%;
	height: auto;
	padding-bottom: 26.667%;
  background: green;
}
.appShopSummaryInfo {
  flex-basis: 60%; /* flex: 0 0 60% */
  width: 60%;
  background: orange;
  height: 100%;
}

<div class='appShopSummaryContainer'>
  <div class='appShopSummaryProductWrap'>
    <a href='#'><div class='appShopSummaryImg'></div>erg</a>
    <div class='appShopSummaryInfo'>wgh</div>
  </div>
  
  <div class='appShopSummaryProductWrap'>
    <a href='#'><div class='appShopSummaryImg'></div>jyu</a>
    <div class='appShopSummaryInfo'>erge</div>
  </div>
</div>

Answer 1

您可以尝试此代码

<div class="appShopSummaryContainer">
  <div class="appShopSummaryProductWrap">
   <a href=""class="appShopSummaryImg"></a>
    <div class="appShopSummaryInfo"></div>
</div>
</div>
</br>
<div class='appShopSummaryContainer'>
  <div class='appShopSummaryProductWrap'>
    <a href='#'class='appShopSummaryImg' ><div>test</div></a>
    <div class='appShopSummaryInfo'>test1</div>
  </div>
</div>

css在这里

.appShopSummaryContainer {
  display: flex;
  flex-flow: column wrap;
}
.appShopSummaryProductWrap {
 flex-basis: 100%;
  background: pink;
    height:100%;
    width:100%;
    display: flex;
    flex-flow: row nowrap;
}

.appShopSummaryImg {
  flex-basis: 40%; /* flex: 0 0 40% */
  width: 40%;
  height: auto;
  padding-bottom: 26.667%;
  background: green;
}

.appShopSummaryInfo {
  flex-basis: 60%; /* flex: 0 0 60% */
  width: 60%;
  background: orange;
    padding-bottom: 26.667%;
  height: 100%;
}

在不应该的时候弯曲儿童包装纸； flex-wrap：nowrap不起作用

1 个答案: