Flexbox layout with listing of articles

Hello,
Could you please to look at fillde https://jsfiddle.net/01za2yxt/
From page layout with 1 article I tried to make listing of articles, but

  1. I left heigt of footer and header
  2. I have a block hostel_item_commands , which must be below of hostel_item_content , buit I lost this property
    How correctly ?
    Thanks!

Hi, I’ll try to decipher what your asking help with.

It looks like your saying you “lost” the height set for the header and footer.

Since you have set display:flex on your body element that means that all child elements will be flex items.

For starters try changing your body height to min-height so it can expand when needed…

	body {
		display: flex;
		flex-direction: column;
		background-color: yellow;
		min-height: 100vh;
	}

Now you can use flex-basis instead of height for your header and footer, that will allow it to expand if needed. Like min-height.

footer {
	flex-basis: 100px; 
	background-color: #deffd0;
}

header {
	flex-basis: 200px; 
	background-color: #bbdfff;
}
1 Like

Thank you for your feedback!
I remade it and now it like : https://jsfiddle.net/6y4akmL3/
as for point 2 :
it was 1 hostel with header, content, commands footer with cells “cell 2:1:1” : https://jsfiddle.net/26fet4vu/
I tried to remake it in listing of hostels and wrap them with hostel_items_listings_container class and hostel_item_container
for any hostel item, but with it commands footer with cells “cell 2:1:1” lost its position at bottom of any block item : https://prnt.sc/oac0yz
Could you please to look one more time ?

Hi,
If you are wanting <div class="hostel_item_commands_row_2"> at the bottom of your <article class="hostel_item_container"> as shown in the screenshot below.

Then remove the <div class="hostel_item_commands"> that they are wrapped in. That will allow all divs to be children and siblings of <article class="hostel_item_container"> which will leave you with this HTML.

  <article class="hostel_item_container">
  <div class="hostel_item_title">
  	hostel_item_title
  </div>

  <div class="hostel_item_content">
  	hostel_item_content
  </div>

  <div class="hostel_item_commands_row_1">
  	<div class="hostel_item_commands_row_cell ">
  		cell 1:1:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:1:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:1:3
  	</div>
  </div>

  <div class="hostel_item_commands_row_2">
  	<div class="hostel_item_commands_row_cell">
  		cell 1:2:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:2:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:2:3
  	</div>
  </div>

  </article>	<!-- class="hostel_item_container" -->

Then the relevant CSS would look like this

.hostel_item_container {
	flex: 1;
	flex-direction: column;
	display: flex;
	justify-content: flex-start;
	/*background-color: green;*/
	border: 4px dotted green;
	/*min-height: 600px;*/
	flex-basis: 600px;/* comment 2 */
}
.hostel_item_title {
	flex: 50px 0 1;
	background-color: #bbdfff;
}
.hostel_item_content {
	border: 2px dotted red;
	flex: 50px 0 1;
	flex-direction: row;
}
.hostel_item_commands_row_1 {
	flex: 100px 0 1;
	background-color: yellow;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.hostel_item_commands_row_2 {
	flex: 100px 0 1;
	background-color: lightpink;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	margin-top: auto;
}

On .hostel_item_commands_row_2 the margin-top:auto is what pushes it to the bottom.

Here is the complete working page if I have understood you correctly.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	display: flex;
	flex-direction: column;
	background-color: yellow;
	min-height: 100vh;
}
main {
	display: flex;
	border: 5px dotted red;
	flex: 1;
}
.hostel_items_listings_container {
	display: flex;
	flex-direction: column;
	background-color: white;
	border: 4px dotted blue;
	flex: 1;
}
.hostel_item_container {
	flex: 1;
	flex-direction: column;
	display: flex;
	justify-content: flex-start;
	/*background-color: green;*/
	border: 4px dotted green;
	/*min-height: 600px;*/
	flex-basis: 600px;/* comment 2 */
}
.hostel_item_title {
	flex: 50px 0 1;
	background-color: #bbdfff;
}
.hostel_item_content {
	border: 2px dotted red;
	flex: 50px 0 1;
	flex-direction: row;
}
.hostel_item_commands_row_1 {
	flex: 100px 0 1;
	background-color: yellow;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.hostel_item_commands_row_2 {
	flex: 100px 0 1;
	background-color: lightpink;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	margin-top: auto;
}
.hostel_item_commands_row_cell {
	/*flex: 1;*/
	border: 4px dotted red;
	align-content: center;
	justify-content: space-between;
}
footer {
	flex-basis: 100px;
	background-color: #deffd0;
}
header {
	flex-basis: 200px;
	background-color: #bbdfff;
}
aside {
	width: 20vw;
	background-color: #e5dde2;
}
nav {
	width: 20vw;
	order: -1;
	background-color: #fdf1ad;
}
</style>

</head>
<body>
  <header>Header</header>
  <!--	http://local-hostels2.com/flex-site-layout-container-->
  <!--	https://prnt.sc/o9dmob-->
  <main>


  <div class="hostel_items_listings_container">

  <article class="hostel_item_container">
  <div class="hostel_item_title">
  	hostel_item_title
  </div>

  <div class="hostel_item_content">
  	hostel_item_content
  </div>

  <div class="hostel_item_commands_row_1">
  	<div class="hostel_item_commands_row_cell ">
  		cell 1:1:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:1:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:1:3
  	</div>
  </div>

  <div class="hostel_item_commands_row_2">
  	<div class="hostel_item_commands_row_cell">
  		cell 1:2:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:2:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 1:2:3
  	</div>
  </div>

  </article>	<!-- class="hostel_item_container" -->


  <article class="hostel_item_container">

  <div class="hostel_item_title">
  	hostel_item_title
  </div>

  <div class="hostel_item_content">
  	hostel_item_content
  </div>

  <div class="hostel_item_commands_row_1">
  	<div class="hostel_item_commands_row_cell ">
  		cell 2:1:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 2:1:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 2:1:3
  	</div>
  </div>

  <div class="hostel_item_commands_row_2">
  	<div class="hostel_item_commands_row_cell">
  		cell 2:2:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 2:2:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 2:2:3
  	</div>
  </div>

  </article>  	<!-- class="hostel_item_container" -->

  <article class="hostel_item_container">

  <div class="hostel_item_title">
  	hostel_item_title
  </div>

  <div class="hostel_item_content">
  	hostel_item_content
  </div>

  <div class="hostel_item_commands_row_1">
  	<div class="hostel_item_commands_row_cell ">
  		cell 3:1:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 3:1:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 3:1:3
  	</div>
  </div>

  <div class="hostel_item_commands_row_2">
  	<div class="hostel_item_commands_row_cell">
  		cell 3:2:1
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 3:2:2
  	</div>
  	<div class="hostel_item_commands_row_cell">
  		cell 3:2:3
  	</div>
  </div>

  </article> 	<!-- class="hostel_item_container" -->

  </div>
  <!-- hostel_items_listings_container  -->

  <nav>Nav</nav>
  <aside>Aside</aside>
  </main>
  <footer>Footer</footer>
</body>

</html>
2 Likes

Thank you for your feedback, it was helpful
The only question from me is :
You wrote
flex: 50px 0 1;

from docs I read that syntax of flex command is :
flex : flex-grow flex-shring flex-basis
that is different from your.
But testing I see that both variants work ok.
?

Yes you are correct and the rule would be better written as:

flex:0 1 50px;

Parsers are clever enough to know that flex-shrink and grow are unitless values whereas flex-basis takes unit values. It is still better to keep the values in their correct order though :slight_smile:

3 Likes

Yes, that was a typo on my end.
It looks like the browser was ignoring the flex-grow and flex-shrink values.

Using the correct syntax that Paul has shown seems to allow flexbox do it’s flexing and break the look you are after.

Using flex-basis only will still allow the divs to expand when they have extra content. Similar to min-height as I pointed out earlier.

.hostel_item_container {
	flex: 1;
	flex-direction: column;
	display: flex;
        justify-content: flex-start;
	/*background-color: green;*/
	border: 4px dotted green;
	/*min-height: 600px;*/
	flex-basis: 600px;/* comment 2 */
}
.hostel_item_title {
	flex-basis: 50px;
	background-color: #bbdfff;
}
.hostel_item_content {
	border: 2px dotted red;
        flex-basis: 50px;
	flex-direction: row;
}
.hostel_item_commands_row_1 {
	flex-basis: 100px;
	background-color: yellow;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.hostel_item_commands_row_2 {
	flex-basis: 100px;
	background-color: lightpink;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	margin-top: auto;
}

When I tested there was no difference between flex:100px 0 1; & flex: 0 1 100px;

The 100px is treated as flex-basis so you end up with flex: 0 1 100px; anyway. Even if the the zero and 1 values are ignored they are the initial defaults for those values anyway.:slight_smile:

3 Likes

Yes, I see that there is no difference now. Though as you mention it’s probably best to use the proper order.

I was thinking that using 0 on flex grow would not allow it to expand it’s height with extra content, like a fixed height. But it does expand, it just doesn’t let it flex to distribute the remaining space.

Testing with this sinppet…

  <div class="hostel_item_title">
    hostel_item_title<br>
    hostel_item_title<br>
    hostel_item_title<br>
    hostel_item_title<br>
    hostel_item_title<br>
  </div>
.hostel_item_title {
  flex: 50px 0 1; /*intentionally reversed*/
  background-color: #bbdfff;
}
.hostel_item_content {
  border: 2px dotted red;
  flex: 0 1 50px; /*correct order*/
  flex-direction: row;
}

Produces this…

2 Likes