与 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;
}

.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;
}

<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>

否则，只需在其上使用flex-wrap: wrap，并在.entry_main 上使用flex: 1 0 100%; 以确保它们扩展为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;
}

.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;
}

<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>

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;
}