I have following situation where css flex based masonry displayed images overflowing the parent div's width. It is supposed to go downwards like a normal Masonry.... but I can't figure it out how to fix this.
I wrote my code like below...
HTML
<div class="mansory-gallery">
<div class="item">
<img src="http://minoboshitaro.com/wp-content/uploads/2017/11/51AEWKP5CQL._SX339_BO1204203200_.jpg">
</div>
</div>
CSS
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
}
.item {
width: 28%;
padding: 15px;
margin: 5px;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Please let me know how to solve this!
Thank you for your time!
Try using justify-content: space-around; instead of margins.
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
justify-content: space-around;
}
.item {
width: 28%;
flex-grow: 1;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Example - https://codepen.io/nhensh/pen/OZRgYa
Related
Aside is used for a complete section left in a webside.
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
color: #00374b;
font-family: Verdana, sans-serif;
font-size: 0.9em;
background-color: #FFFFFF;
}
/*First big flexbox container that places the elements from top to down (column)*/
.flex_container {
width: 100%;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/*Second big flexbox container for the ASP form from left (aside) to right (main section) (row)*/
.layout_main {
flex: 1 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-flow: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.layout_aside {
flex: 1 auto;
background-color: #004664;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
padding: 10px;
}
.element {
flex: 1 auto;
}
.layout_main_content {
flex: 1 1 90%;
min-width: 500px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
article{
flex: 1 auto;
}
<body class="flex_container">
<div class="layout_main">
<aside class="layout_aside" id="aside_menu" runat="server">
<div class="element">Test 1</div>
<div class="element">Test 2</div>
<div class="element">Test 3</div>
</aside>
<div class="layout_main_content">
<article>Article1</article>
<article>Article2</article>
</div>
</div>
</body>
For this code the flexbox definition is not working for aside. If I remove the runat="server" the flexbox is again recognized.
Any suggestion or resolution. I tried to put the runat server to a different div but this doesn´t help.
I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.
This is my html:
<div class="flex-container">
<div class="flex-row">
<h1 class="brandname">Hello</h1>
</div>
<div class="flex-row">
<form>
<!-- <div class="search centered"> -->
<div class="search">
<div class="input-container">
<input type="text" name="query" class="searchbar" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
</div>
and this is my css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.flex-container{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
form{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
.search{
display: flex;
display: -webkit-flex;
flex: 0 1 455px;
-webkit-flex: 0 1 455px;
}
.input-container{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.searchbar{
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
/*float: left;*/
/*display: block;*/
flex: 1;
-webkit-flex: 1;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
border-radius: 0px;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
outline-style: none;
border-width: 0px;
}
and it works in chrome, ie edge and in this fiddle, but not in safari.
In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.
any ideas on how to make this work in safari?
One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.
I changed .flex-row css rules to:
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 0 1 100%;
}
and changed the flex-row first child css rules to:
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 auto;
}
and then it works.
I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy
Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
similar for all other rules.
I have a containing <ul> that is display: flex horizontal. Each <li> is 25% width and also display: flex to get them all equal heights.
Each <li> contains an anchor that is display: flex column, to align the elements within correctly, including the main image container and image. In every browser, including IE10 this is absolutely fine, no issues. However, in IE11 this is where the problems start.
IE11 calculates the image container height as the actual height of the source image, and not the height of the image when rendered. This ends up rendering the <li> much, much taller than it should be.
How the layout looks in every self-respecting browser:
How the layout looks in IE11:
Check out the live example
I know this could be solved by explicitly defining the image height, but I don't want to do that. I could also solve it with JS, but again, I shouldn't have to. Am I missing something with this, as it doesn't appear to be listed on Flexbugs.
* {
box-sizing: border-box;
}
img {
display: block;
width: 100%;
}
.promotions-list {
background-color: #eaeaea;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: .5rem 1rem;
width: 960px;
}
.promotions-list__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1rem;
width: 25%;
}
.promotions-list__link {
background-color: white;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
padding: 1em;
position: relative;
width: 100%;
}
.promotions-list .image-container {
display: block;
height: auto;
}
.promotions-list .image-container img {
display: block;
margin: 0 auto;
max-width: 40%;
}
<ul class="promotions-list">
<li class="promotions-list__item has-image">
<a href="/promotion/358/the-new-l5000-mono-laser-range-from-brother" class="promotions-list__link" title="Link to The NEW L5000 Mono Laser Range from Brother details">
<span class="promotions-list__item__header">
<span class="image-container">
<img src="//cdn.2020prosoftware.com/installations/1/promotions/358/original/NewModel2016.png">
</span>
<span class="list__item__title">The NEW L5000 Mono Laser Range from Brother</span>
</span>
<span class="promotions-list__item__body">
<span class="description">The NEW standard in reliability! Introducing new, improved printers from Brother, the market leader…</span>
</span>
</a>
</li>
</ul>
This appears to be fixed by setting flex: 0 0 auto on .promotions-list__item__header.
* {
box-sizing: border-box;
}
img {
display: block;
width: 100%;
}
.promotions-list {
background-color: #eaeaea;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: .5rem 1rem;
width: 960px;
}
.promotions-list__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1rem;
width: 25%;
}
.promotions-list__link {
background-color: white;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
padding: 1em;
position: relative;
width: 100%;
}
.promotions-list .image-container {
display: block;
height: auto;
}
.promotions-list .image-container img {
display: block;
margin: 0 auto;
max-width: 40%;
}
/* Added */
.promotions-list__item__header {
flex: 0 0 auto;
}
<ul class="promotions-list">
<li class="promotions-list__item has-image">
<a href="/promotion/358/the-new-l5000-mono-laser-range-from-brother" class="promotions-list__link" title="Link to The NEW L5000 Mono Laser Range from Brother details">
<span class="promotions-list__item__header">
<span class="image-container">
<img src="//cdn.2020prosoftware.com/installations/1/promotions/358/original/NewModel2016.png">
</span>
<span class="list__item__title">The NEW L5000 Mono Laser Range from Brother</span>
</span>
<span class="promotions-list__item__body">
<span class="description">The NEW standard in reliability! Introducing new, improved printers from Brother, the market leader…</span>
</span>
</a>
</li>
</ul>
If I have a flexbox container with a fixed child, but it does not seem to wrap elements correctly:
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
</div>
#parent {
display: flex;
flex: 1;
flex-direction: column;
flex-wrap: wrap;
}
#child-1 {
display: flex;
flex: 1 0 auto;
position: fixed;
}
#child-2 {
display: flex;
flex: 1 1 auto;
overflow-y: scroll;
}
Add position:sticky; and top:0; to the #child-1 instead of position fixed;
I have fixed this with:
parent:
display: flex;
flex-direction: column;
height: 100%;
child 1:
display: flex;
flex: 1 0 auto;
justify-content: space-between;
flex-wrap: wrap;
child 2
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
overflow-y: auto;
I have this
.parentcontainer
{
background-color: black;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: space-around;
}
.aside
{
display:flex;
flex: 30%;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
.content
{
background-color: blue;
flex: 70%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
max-height:800px;
}
.content img
{
width: 100%;
max-width: 100%;
height: auto;
}
when I resize the browser the imgs of the .content doesnt resize and I need to do a horizontal scroll. How can I do for resizing the images? and the child container doesnt get bigger than the parent container. thanks.
EDIT: now I change .content to columns, and mas height to 800px. I want the articles of the .content go down,and when they reach 800px, make another column. the problem stays, the articles of .content goes outside the parent box instead or resize...
Try this:
.content img{
width: 100%;
max-width: 100%;
height: auto
}