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;
Related
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
I have a flex container and the children in that are wrapping, I want them to both remain 100% in width - how would I do this?
.flexbox {
display: flex;
align-items: center;
width: 100%;
height: 100vh;
}
.container {
display: flex;
flex-shrink: 0;
display: block;
}
<div class="flexbox">
<div class="container">sadasd</div>
<div class="container">adasdsad</div>
</div>
https://jsfiddle.net/shx2yheg/
You just need to set flex: 0 0 100% on flex child elements and initial value of flex-wrap is nowrap so you don't have to change that.
.flexbox {
display: flex;
align-items: center;
width: 200px;
border: 2px solid red;
}
.container {
flex: 0 0 100%;
border: blue 1px solid;
}
<div class="flexbox">
<div class="container">sadasd</div>
<div class="container">adasdsad</div>
</div>
you could do that by setting the flex-flow property on the the flexbox like this
.flexbox {
display: flex;
align-items: center;
flex-flow: column;
width:100%;
height:100vh;
}
.container {
display: flex;
}
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 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
}
Here is the base fiddle:
html, body {
height: 100%;
margin: 0;
padding: 0;
color: white;
}
header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}
http://jsfiddle.net/lzhelenin/2j0yzuoe/
What I want is to make /main/ grow if there's enough free space
http://joxi.ru/BA0dpaVcqQqMAy
I know that it's possible to do it using flexboxes:
html, body {
height: 100%;
margin: 0;
padding: 0;
color: white;
}
#wrapper {
height:100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
header {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background-color: red;
}
main {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background-color: green;
}
footer {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background-color: blue;
}
http://jsfiddle.net/lzhelenin/2j0yzuoe/1/
The result looks exactly the way I want but I think it's not a really cross-browser solution. Is it possible to do it an another way (notice that I can't use fixed height)?
This is easy enough, you need one column of three rows, check my answer on question how-to-build-flexible-structure.
Generally speaking:
one flexible column (display: flex; justify-content: space-between; flex-direction: column)
row one flexed child with fixed height (height: y-value-1)
row two flexed child being stretched (flex: 1)
row three flexed child with fixed height (height: y-value-2)
And if you want evenly distributed rows, make them all (flex: 1)