Why items dont shrink in inline-flex. But it works fine in normal flex. Maybe it is supposed to work that way, I dont know. Maybe it is somewhere in the spec but I coudn't find anything related. I would be grateful if someone could explain this.
.container {
width: 100px;
margin 0 auto;
margin-top: 100px;
background-color: green;
}
.inline-flex {
display: inline-flex;
margin-bottom: 10px;
}
.flex {
display: flex;
}
.item {
width: 50px;
height: 50px;
margin-right: 5px;
background-color: blue;
}
<div class="container">
<div class="inline-flex">
<div class="item">no-shrink</div>
<div class="item">no-shrink</div>
<div class="item">no-shrink</div>
</div>
<div class="flex">
<div class="item">shrink</div>
<div class="item">shrink</div>
<div class="item">shrink</div>
</div>
</div>
As stated before, flex acts like a block and inline-flex like inline-block on the outside and their children behave identically. The flex-items .item are acting totally different when they should appear the same because their behavior is influenced by the flex-container (.flex and .inline-flex). Aside from the flex-containers having different display values, there are no other differences.
Each .item of .inline-flex has retained it's width of 50px
Each .item of .flex has a width of 34.6687px
I still haven't figured out why this is but I have 3 different solutions:
.container is too small, increase it's width.
See Example A
Figure I
.container {
width: 200px;
/* Increase .container to at least the .offsetWidth of the 3 .item`s */
Change the flex properties of .items or assign min-width
See Example B
Figure II
.B .item {
flex: 0 0 50px;
/* OR */
/* min-width: 50px */
}
*,
::before,
::after {
box-sizing: border-box;
}
.container {
width: 100px;
background-color: green;
}
.A {
width: 200px;
}
.inline-flex {
display: inline-flex;
margin-bottom: 10px;
}
.flex {
display: flex;
}
.item {
width: 50px;
height: 50px;
margin-right: 5px;
background-color: blue;
}
.B .item {
flex: 0 0 50px;
/* OR */
/* min-width: 50px */
}
h3 {
margin: 0 0 4px 0
}
<h3>OP</h3>
<div class="container">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
<h3>Example A</h3>
<div class="container A">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
<h3>Example B</h3>
<div class="container B">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
Related
Hi I'm trying to vertically and horizontally center a grid div by using flexbox inside a another div with a background image. It goes to the top left.
.flex_center {
display: flex;
align-items: center;
justify-content: center;
background-color: coral;
opacity: 0.7;
width: 1300px;
height: 485px;
z-index: 0;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-rows: 161px 161px 161px;
grid-template-columns: 360px 940px;
background-color: coral;
}
<section class="hero">
<div class="flex_center">
<div class="grid">
<div class="grid-item-1"><img src="images/logo_hero.png" class="logo_center"></div>
<div class="grid-item-2">
<p class="center">KIA'PALANO SEAFOODS</p>
</div>
<div class="grid-item-3">
<p class="squamish">A Squamish tribal-owned seafood company <br> located along the Squamish River, B.C</p>
</div>
<div class="grid-item-4">
<div class="button">COME ON IN</div>
</div>
</div>
</div>
</section>
I'm trying to make .item-1 and .item-2 stack nicely on top of each other in a grid, just like in this snippet:
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto 1fr;
}
.item {
padding: 10px;
border: 1px solid black;
}
.item-1 {
grid-column: 1 / 3;
}
.item-2 {
grid-column: 1 / 3;
}
.item-3 {
grid-column: 3 / 7;
grid-row: 1 / 3;
padding: 80px 20px;
}
<div class="grid">
<div class="item item-1">
item-1
</div>
<div class="item item-2">
item-2
</div>
<div class="item item-3">
item-3
</div>
</div>
This is a simplified example, and the implementation I'm stuck on has more rows of items in different places.
For example: large item first, or no large item at all.
Which is why grid-template-rows seems to be off the table, and I cannot find a way to stack them nicely without.
I've tried many different things, from grid-auto-rows to the various grid-* and align-*, to height and margins set to auto and fit-content, without success.
Here's the same snippet without grid-template-rows, where you can see the default behavior of .item-1 and .item-2 being separated / getting the same height:
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(6, 1fr);
}
.item {
padding: 10px;
border: 1px solid black;
}
.item-1 {
grid-column: 1 / 3;
}
.item-2 {
grid-column: 1 / 3;
}
.item-3 {
grid-column: 3 / 7;
grid-row: 1 / 3;
padding: 80px 20px;
}
<div class="grid">
<div class="item item-1">
item-1
</div>
<div class="item item-2">
item-2
</div>
<div class="item item-3">
item-3
</div>
</div>
Here's an image of the snippets, showing the desired layout:
Try this
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.item {
border: 1px solid #000;
padding: 10px;
}
.box1 {
display: flex;
flex-direction: column;
gap: 10px;
}
.item2 {
flex: 1;
}
.item3 {
padding: 80px 20px;
}
<div class="grid" >
<div class="box1">
<div class="item" >item 1</div>
<div class="item item2" >item 2</div>
</div>
<div class="item item3" >item 3</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.item {
border: 1px solid #000;
padding: 10px;
}
.box1 {
display: flex;
flex-direction: column;
gap: 10px;
}
.item1 {
flex: 1;
}
.item2 {
flex: 1;
}
.item3 {
padding: 80px 20px;
}
<div class="grid" >
<div class="box1">
<div class="item item1" >item 1</div>
<div class="item item2" >item 2</div>
</div>
<div class="item item3" >item 3</div>
</div>
1) 1st column should have the same height as the other 2
2) 1st column should have 40% width, whereas each other columns have 30%
3) rows in the last 2 columns should have the same height
4) First 2 rows should have 40% height, whereas the last row on 20%
I attached a picture to make it clear
Many thanks
body, html, #fs {
width:100%;
height:100%;
margin:0;
padding:0;
}
#i1-table {
display:table;
width:100%;
height:100%;
}
#i1-trow {
display:table-row;
width:100%;
height:100%;
}
#i1-rowspan {
display: table-cell;
height:100%;
width:40%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#i1-rowcont {
display: table-cell;
height:100%;
width:60%;
}
#i1-table-in {
display:table;
width:100%;
height:100%;
}
.i1-rowcont-row1 {
display: table-row;
height:40%;
width:100%;
}
.i1-rowcont-row2 {
display: table-row;
height:20%;
width:100%;
}
.i1-cell1 {
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}
.i1-cell2 {
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}
<div id="fs">
<div id="i1-table">
<div id="i1-trow">
<div id="i1-rowspan">
1
</div>
<div id="i1-rowcont">
<div id="i1-table-in">
<div class="i1-rowcont-row1">
<div class="i1-cell1" style="background-color:blue">
2
</div>
<div class="i1-cell1" style="background-color:yellow">
3
</div>
</div>
<div class="i1-rowcont-row1">
<div class="i1-cell1" style="background-color:gray">
4
</div>
<div class="i1-cell1" style="background-color:cyan">
5
</div>
</div>
<div class="i1-rowcont-row2">
<div class="i1-cell2" style="background-color:magenta">
6
</div>
<div class="i1-cell2" style="background-color:green">
7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My question is: i have a container with masonry layout, is possible that one or more item have inside another container with masonry?
<div class="masonry">
<div class="item"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside"></div>
<div class="item_inside"></div>
<div class="item_inside"></div>
</div>
</div>
<div class="item"></div>
</div>
You will have to init Masonry seperately on each grid container:
// Init masonry on outer container
$('.masonry').masonry({
itemSelector: '.item',
});
// Init masonry on inner container
$('.masonry_inside').masonry({
// You need to use another item selector class on the inner elements
itemSelector: '.item_inside',
});
.masonry {
width: 440px;
background-color: gray;
}
.item {
width: 200px;
background-color: black;
margin: 10px;
}
.item_inside {
width: 80px;
margin: 10px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<div class="item" style="height: 150px;"></div>
<div class="item" style="height: 200px;"></div>
<div class="item" style="height: 180px;"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside" style="height: 180px;"></div>
<div class="item_inside" style="height: 80px;"></div>
<div class="item_inside" style="height: 120px;"></div>
<div class="item_inside" style="height: 35px;"></div>
</div>
</div>
<div class="item" style="height: 80px;"></div>
</div>
I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?