Mark Sandman Mark Sandman - 1 year ago 62
HTML Question

Confusion with rows and columns in Flexbox

I am trying to use flexbox to make the following layout:

my desired layout

I wish the

.entry__main
content to act like a block item where the next hmtl block falls on to a different line within the parent column, which has the
entry__content
div. However this isn't happening (I am just learning flex so wish to use that) - my content isn't wrapping and my divs are appearing on the same row like so:

enter image description here



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





Can someone show me how to make the
entry__main
div take up the whole row as desired... to see this in the "real world" here is a jsbin: http://jsbin.com/bitajejaxi/edit?html,css,output

Answer Source

The layout strategy you are using to arrange .entry_main does not actually require display: flex on the parent ;) since the parent only used to hold individual .entry_main elements on new lines. Removing it will generate the layout you intend:

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

Otherwise, simply use flex-wrap: wrap on it, and flex: 1 0 100%; on .entry_main to ensure they expand to 100% width (hence forcing each item on new rows):

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download