与Flexbox中的行和列混淆

Question

我正在尝试使用flexbox进行以下布局：

我希望.entry__main内容像块项一样，其中下一个hmtl块落在父列中具有entry__content div的不同行。然而，这不会发生（我只是学习flex，所以希望使用它） - 我的内容不是包装，我的div出现在同一行，如下所示：

.entry {
    display: flex;
    cursor: pointer;
    overflow: hidden;
    padding: 12px;
    border-bottom: 1px solid #E3E3E3;
}

.entry__image {
  width: 50px;
  position: relative;
}

.entry__content {
  display: flex;
  flex: 1;
  padding-left: 12px;
}

.entry__info {
  width: 30px;
}

.entry__main {
  display: flex;
  flex: 1;
}

.entry__text {
  flex: 1;
}

<div class="entry">
    <!-- this is a column -->
    <div class="entry__image">
        <img src="profile-pic.jpg">
    </div>
    <!-- this is a column -->
    <div class="entry__content">
        <!-- I want "entry__main" to fill the horizontal and be two columns" -->
        <div class="entry__main">
            <div class="entry__text">
                <div>Here is some content</div>
                <div>Here is some content below</div>
            </div>
            <div class="entry__info">
                <img src="delete-icon.png">
            </div>
        </div>

        <!-- I want "entry__main" to fill the horizontal and be two columns" -->
        <div class="entry__main">
            <div class="entry__text">
                <div>Here is some content</div>
                <div>Here is some content below</div>
                <div>Here is some content below like the date 01-01-2018</div>
            </div>
            <div class="entry__info">
                <img src="delete-icon.png">
            </div>
        </div>
    </div>
</div>

有人可以告诉我如何让entry__main div根据需要占据整行...在“现实世界”中看到这是一个jsbin：http://jsbin.com/bitajejaxi/edit?html,css,output

Answer 1

您用于排列.entry_main的布局策略实际上并不需要display: flex在父级上;）因为父级仅用于在新行上保存单个.entry_main元素。删除它将生成您想要的布局：

.entry__content {
  flex: 1;
  padding-left: 12px;
}

＆＃13;

＆＃13;

.entry {
    display: flex;
    cursor: pointer;
    overflow: hidden;
    padding: 12px;
    border-bottom: 1px solid #E3E3E3;
  }

.entry__image {
  width: 50px;
  position: relative;
}

.entry__content {
  flex: 1;
  padding-left: 12px;
}

.entry__info {
  width: 30px;
}

.entry__main {
  display: flex;
  border: 1px solid #38c0c4;
}

.entry__text {
  flex: 1;
}

＆＃13;

<div class="entry">
	<!-- this is a column -->
	<div class="entry__image">
		[Foto]
	</div>
	<!-- this is a column -->
	<div class="entry__content">
		<!-- I want "entry__main" to fill the horizontal and be two columns" -->
		<div class="entry__main">
			<div class="entry__text">
				<div>Here is some content</div>
				<div>Here is some content below</div>
			</div>
			<div class="entry__info">
				X
			</div>
		</div>

		<!-- I want "entry__main" to fill the horizontal and be two columns" -->
		<div class="entry__main">
			<div class="entry__text">
				<div>Here is some content</div>
				<div>Here is some content below</div>
				<div>Here is some content below like the date 01-01-2018</div>
			</div>
			<div class="entry__info">
				X
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

否则，只需在其上使用flex-wrap: wrap，在flex: 1 0 100%;上使用.entry_main即可确保它们扩展到100％宽度（从而强制新行上的每个项目）：

.entry__content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding-left: 12px;
}

.entry__main {
  display: flex;
  flex: 1 0 100%;
  border: 1px solid #38c0c4;
}

＆＃13;

＆＃13;

.entry {
    display: flex;
    cursor: pointer;
    overflow: hidden;
    padding: 12px;
    border-bottom: 1px solid #E3E3E3;
  }

.entry__image {
  width: 50px;
  position: relative;
}

.entry__content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding-left: 12px;
}

.entry__info {
  width: 30px;
}

.entry__main {
  display: flex;
  flex: 1 0 100%;
  border: 1px solid #38c0c4;
}

.entry__text {
  flex: 1;
}

＆＃13;

<div class="entry">
	<!-- this is a column -->
	<div class="entry__image">
		[Foto]
	</div>
	<!-- this is a column -->
	<div class="entry__content">
		<!-- I want "entry__main" to fill the horizontal and be two columns" -->
		<div class="entry__main">
			<div class="entry__text">
				<div>Here is some content</div>
				<div>Here is some content below</div>
			</div>
			<div class="entry__info">
				X
			</div>
		</div>

		<!-- I want "entry__main" to fill the horizontal and be two columns" -->
		<div class="entry__main">
			<div class="entry__text">
				<div>Here is some content</div>
				<div>Here is some content below</div>
				<div>Here is some content below like the date 01-01-2018</div>
			</div>
			<div class="entry__info">
				X
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

完全删除display: flex .entry__content。 div的默认值是占用整行（块）。

Answer 3

您可以使用flex-direction属性。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-3

.entry__content {
  flex-direction: column;
}