How to create two containers with equal width even if there are a lot of flex items inside one of them? I could add overflow hidden to both containers but it seems to be workaround rather than solution of the problem
<div class="parent">
<div class="child1">
blabla
</div>
<div class="child2">
<div class="container">
<div class="subcontainer">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="subcontainer">bbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="subcontainer">ccccccccccccccccccccccc</div>
<div class="subcontainer">dwadawdwdaadwawadawddwaw</div>
<div class="subcontainer">dddddddddddddddddddddddd</div>
<div class="subcontainer">eeeeeeeeeeeeeeeeeeeeeeee</div>
</div>
</div>
</div>
.parent {
display: flex;
}
.child1, .child2 {
flex: 1;
flex-basis: 50%;
/* overflow: hidden */
}
.container {
display: flex;
}
.child1 {
border: 1px solid red;
}
.child2 {
border: 1px solid green;
}
https://jsfiddle.net/0e7n6g8b/
Simply add flex-wrap:wrap; to your container div.
.container {
display: flex;
flex-wrap:wrap;
}
Thanks
Related
I am trying to layout my page using flexbox.
I want the right child to be fixed and the left one to scroll.
below is the markup.
.parent {
display: flex;
}
.child1 {
position:fixed;
order: 1;
height: 300px;
background-color: red;
}
.child2 {
order: 2;
height: 100px;
background-color: blue;
}
<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>
What I want to do is to make the child1 static while child2 scrolls down.
Perhaps, you want to use position:sticky to achieve the layout.
Here's the HTML structure
<div class="parent">
<div class="child child1">Child 1 content goes here</div>
<div class="child child2">
<div class="sticky">
Child 2 content goes here
</div>
</div>
</div>
And the CSS
.parent {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.child {
flex: 0 1 48%;
border: 5px solid #ececec;
}
.child1 {
font-size: 32px;
}
.child2 {
position: sticky; // will keep the position of the div stuck
top: 0; // this will specify when do you want the position sticky to take effect from the top
}
Have linked the codepen https://codepen.io/backslashr/pen/abvzQmo
In the snippet below, I want the "title" div to size itself based on its content, so I don't have to specify a width. That bit is obviously working already. I then want the "rightside" div to take the remaining space and right align itself - at the moment it just sits next to the title div.
And of course I don't want to use floats because that messes up everything and we have a no floats policy here.
Based on reading other threads I thought adding an overflow:hidden to one of the parents would make it do this but I can't get it working.
I don't want to specify a width for either div but it will always be the case that one of the parents will have a width specified, so in this case I've set it on the "outer" element.
So how do we get "rightside" to appear to the right of the red box ? thanks
.outer {
width:500px;
border:1px solid red;
}
.outer div {
display:inline-block;
border:1px solid green;
}
.rightside {
width:auto;
text-align: right;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
you should use flexbox or grid to solve this kind of problems its easy and fast
flex example
.outer {
width:500px;
border:1px solid red;
}
.inner {
display:flex;
flex-direction:row;
justify-content:space-between;
}
.outer div {
/* display:inline-block; */
border:1px solid green;
}
.rightside {
width:auto;
text-align: right;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
and grid
.outer {
width:500px;
border:1px solid red;
}
.inner {
display:grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
justify-content:space-between;
}
.outer div {
/* display:inline-block; */
border:1px solid green;
}
.rightside {
width:auto;
text-align: right;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
Flexbox will help!
.outer {
width: 500px;
border: 1px solid red;
}
.outer .title,
.outer .rightside {
display: inline-block;
border: 1px solid green;
}
.inner {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
If you would like the rightside to fill the rest of the space, you could use flexbox and flex-grow, like this:
.inner {
display: flex;
justify-content: space-between;
}
.inner div {
display:inline-block;
border:1px solid green;
width: auto;
flex-grow: 1;
}
.rightside {
width:auto;
text-align: right;
}
With flexbox, you only need to set display: felx; for the parent element, and margin-left: auto; for the rightside (child) element :
div {
border: 2px dotted silver;
padding: .5em;
}
/* ---------------- */
.parent {
display: flex;
}
.rightside {
margin-left: auto;
}
<div class="parent">
<div>
Child 1
</div>
<div class="rightside">
Child 2
</div>
</div>
I am trying to center a div within its parent div like so:
<div id="wrapper">
<div id="yourdiv">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
</div>
</div>
#wrapper {
background-color: green;
text-align: center;
}
#yourdiv {
background-color: red;
display: inline-block;
}
#yourdiv > div
{
float: left;
width: 200px;
}
#one {
background-color: blue;
}
#two {
background-color: brown;
}
This works fine when the child div does not 'wrap' as you can see below.
However, once there are too many child elements to fit the page width, the elements wrap to a second row and 'yourdiv' fills its parent width like so:
The child elements are no longer centered on the page because 'yourdiv' now fills its parents width. How can I fix it so that 'yourdiv' shrinks its width to its content so that the child elements are centred no matter how many there are?
EDIT:
The desired result is:
I recommend using flexbox.
To center your elements horizontally use
display: flex;
justify-content: center;
flex-wrap: wrap;
on the container.
Play around with flex-grow, min-width and max-width on the children to tune your layout.
Turn your css to flex and it's too much easier. Your just have to set #yourdiv flex-wrap: wrap; to make it wrap when overflow and justify-content: center; to center child element:
#wrapper {
background-color: green;
text-align: center;
}
#yourdiv {
background-color: red;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#yourdiv>div {
float: left;
width: 200px;
}
#one {
background-color: blue;
}
#two {
background-color: brown;
}
<div id="wrapper">
<div id="yourdiv">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
</div>
</div>
You should use Flexbox for those cases, you should read those good articles:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and play this game to understand Flexbox while playing a game:
https://flexboxfroggy.com/
#wrapper {
background-color: green;
text-align: center;
}
#yourdiv {
background-color: red;
display: flex;
justify-content: center;
}
#yourdiv > div {
min-width: 100px;
}
.one {
background-color: blue;
}
.two {
background-color: brown;
}
<div id="wrapper">
<div id="yourdiv">
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
</div>
</div>
I need css styling for 2 columns. The first column should use the complete width and the second column next to it should use only the width it needs. How can i do that? Is there any way to do this with display: flex?
Example:
"-" = whitespace
if second column is display: none, the first column should use width 100%
[First-Column-------------------------------------------------------]
and if not
[First-Column------------------------------------------------][HELLO]
[First-Column-------------------------------------------][HELLOHELLO]
You can do this with flexbox. Just use flex: 1 for the first child and flex: 0 for the second.
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you hide the second child, the result looks like this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
display: none;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you want items with only width of the content you could use this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
justify-content: space-between;
}
.child1 {
background: red;
}
.child2 {
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
You can do this with below code:
.mainDiv, .mainDiv div{
display: block;
}
.mainDiv .firstDiv{
float: left;
width: 200px;
}
.mainDiv .secondDiv{
float: left;
width: calc(100% - 200px);
}
<div class="mainDiv">
<div class="firstDiv"> First Div </div>
<div class="secondDiv"> Second Div </div>
</div>
.main{
display:flex;
}
<div class="main">
<div>[First-Column------------------------------------------------]</div>
<div> [HELLO]</div>
</div>
I want to create one flex container, which has 3 child items. However, I want two of the child items to be columns, and the third one to be a row which runs below of the the columns (like a footer). Is it possible?
This is probably best achieved by using two divs, one flex-box, and one that isn't: see below:
#wrapper {
display: flex;
background-color: lightblue;
}
#a {
background-color: lightgreen;
}
#b {
background-color: lightgray;
}
#c {
background-color: lightyellow;
}
<div id="wrapper">
<div id="a">This is a</div>
<div id="b">This is b</div>
</div>
<div id="c">This is c</div>
You can do something like THIS
.container {
display: flex;
flex-direction: column;
width: 100%;
}
.col-container {
display: flex;
flex-direction: row;
}
.col {
margin: 10px;
height: 200px;
width: 200px;
background-color: blue;
}
.row {
height: 100px;
width: 100%;
background-color: red;
}
<div class="container">
<div class="col-container">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row"></div>
</div>