I'm trying to put a flexbox container next to each other, so that they would be side by side, like this:
Here is what I have so far:
.container {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
border: 3px dashed black;
width: 750px;
height: 750px;
}
.container1 {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
border: 3px dashed black;
width: 1500px;
height: 50px;
}
.container2 {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
border: 3px dashed black;
width: 750px;
height: 750px;
}
<div class="container1"></div>
<div class="container"></div>
<div class="container2"></div>
You need to add an outer container and then add display flex and the flex row
See here:
https://codepen.io/lasercake/pen/yrwNVx
<div class="container1"></div>
<div class="outer-container">
<div class="container"></div>
<div class="container2"></div>
</div>
And the css will need updating to:
.container {
border: 3px dashed black;
width: 750px;
height: 750px;
}
.outer-container{
display: flex;
flex-direction: row;
}
.container2 {
border: 3px dashed black;
width: 750px;
height: 750px;
}
This is because flexbox is more about the containing element rather than the individual elements. In this case the outer-container is formatting the child elements to display equally in a row.
Edit: This is a great site to use a flexbox reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need a parent flex container with justify-content: space-between.
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 months ago.
I have a horizontally centered column of Flex items ordered from 1 to 5 that are aligned from the top of the container like this:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
I would like to let it aligned by the bottom of the container instead. I manage to do it with flex-direction: column-reverse; like in the next Snippet:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
However, as you see, the items get out of order! Is there a way to let a flex column on the bottom without reversing the items order using CSS? I tried every Flex property that I know so far without success.
You can use justify-content: end;
.container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
}
.content {
width: 25px;
height: 25px;
border: 1px solid black;
}
<div class="container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
You need to use the justify-content property to align content along the main axis (in your case vertically). You are using align-items which defines how the items should be aligned along the cross axis.
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container>
<div class=item>1</div>
<div class=item>2</div>
<div class=item>3</div>
<div class=item>4</div>
<div class=item>5</div>
</div>
How do I achieve an input field that: on hover, it expands on the other sibling elements (that have the same parent)?
so for example I have:
.grandparent{
display: flex;
justify-content: space-between;
width:100%;
height:5rem;
}
.other{
background-color: #7fffd477;
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
}
.parent{
background-color: #fff67f;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 12px;
}
.child-1{
background-color: #ff7f7f;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 60%;
}
.child-2{
background-color: #77ab55;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 5rem;
}
.child-2:hover{
width: 100%;
transition: all 0.5s;
}
<div class="grandparent">
<div class="parent">
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
<div class="child-2">
2.0
</div>
</div>
<div class="other">
other
</div>
</div>
I want the "child-2" div to expand for the whole "parent" (yellow) div and overlay other sibling elements when I hover on it.
Anyone can help me achieve this through CSS?
For the rightmost element in parent to expand over its siblings without affecting them it needs to be positioned absolute and 'anchored' at the right hand side of parent so that the width can grow towards the left.
For the simple HTML structure given in the question where there is only one sibling of the expandable element it would be possible to achieve the required layout without changing the HTML but removing the flex from parent.
However, the question mentions 'siblings' and there is therefore a requirement to layout parent with equal spacing between all its children.
This snippet allows for this by adding a div within child-2. child-2 remains with its given width and therefore takes part in the flex calculations for parent.
However, the inner div is the one which will be positioned absolute and expand to the left.
To get positioning and dimensions correct the 5rem width of child-2 and 12px padding of parent are made CSS variables and CSS calc is used. This should make it easier to change these settings if required.
To show the increased generality, this snippet has 2 siblings (each for the demo set to child-1 settings with width 30% instead of 60%).
.grandparent {
display: flex;
justify-content: space-between;
width: 100%;
height: 5rem;
}
.other {
background-color: #7fffd477;
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
}
.parent {
--pad: 12px;
/* set to the width of the parent's padding */
background-color: #fff67f;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: var(--pad);
position: relative;
}
.child-1 {
background-color: #ff7f7f;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 60%;
width: 30%;
}
.child-2 {
--w: 5rem;
/* the width of the rightmost element in parent */
height: 100%;
width: var(--w);
right: 0;
}
.child-2>* {
position: absolute;
background-color: #77ab55;
display: flex;
align-items: center;
justify-content: center;
width: var(--w);
height: calc(100% - (2 * var(--pad)));
transition: all 0.5s;
right: var(--pad);
}
.child-2:hover>* {
width: calc(100% - (2 * var(--pad)));
}
<div class="grandparent">
<div class="parent">
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
<div class="child-2">
<div>
2.0
</div>
</div>
</div>
<div class="other">
other
</div>
</div>
I have adjusted the HTML structure: .child-1 is now after .child-2.
The CSS for .parent now includes flex-direction: row-reverse.
It is now possible to easily affect .child-1 via CSS (display: none).
.grandparent {
display: flex;
justify-content: space-between;
width: 100%;
height: 5rem;
}
.other {
background-color: #7fffd477;
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
}
.parent {
background-color: #fff67f;
display: flex;
justify-content: space-between;
flex-direction: row-reverse; /* Added */
align-items: center;
width: 100%;
padding: 12px;
}
.child-1 {
background-color: #ff7f7f;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 60%;
}
.child-2 {
background-color: #77ab55;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 5rem;
}
.child-2:hover {
width: 100%;
transition: all 0.5s;
z-index: 10;
}
/* Added */
.child-2:hover+.child-1 {
display: none;
}
<div class="grandparent">
<div class="parent">
<div class="child-2">
2.0
</div>
<div class="child-1">
<div class="sub-child-1">1.1</div>
<div class="sub-child-2">1.2</div>
</div>
</div>
<div class="other">
other
</div>
</div>
This question already has answers here:
What's the difference between align-content and align-items?
(15 answers)
Closed 3 years ago.
I have a flex container with two children of fixed dimensions that are aligned flex-end (the bottom of the parent).
When I resize the parent I want them to wrap on top of each other, but instead they each take up 50% of the parent height.
Is there a way to do this without adding another div?
FIDDLE
.wrapper {
width: 600px;
height: 500px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
background-color: #eeeeee;
resize: horizontal;
overflow: auto;
flex-wrap: wrap;
}
.one {
width: 200px;
height: 100px;
background: red;
}
.two {
width: 200px;
height: 100px;
background: blue;
}
<div class="wrapper">
<div class="one">1</div>
<div class="two">2</div>
</div>
You need to also consider align-content like below:
.wrapper {
width: 600px;
height: 500px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content:flex-end; /*added this*/
align-items: flex-end;
background-color: #eeeeee;
resize: horizontal;
overflow: auto;
flex-wrap: wrap;
}
.one {
width: 200px;
height: 100px;
background: red;
}
.two {
width: 200px;
height: 100px;
background: blue;
}
<div class="wrapper">
<div class="one">1</div>
<div class="two">2</div>
</div>
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 4 years ago.
Is it possible to create a flexbox layout with wrapping children and aligning them to the top?
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container .element {
flex: 0 0 auto;
}
creates this:
but my plan is to achieve this:
.container {
border: 1px solid black;
padding: 10px;
height: 250px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
overflow: hidden;
resize: both;
}
.container div {
border: 5px solid #AAA;
background-color: #DDD;
margin: 3px;
height: 100px;
width: 50px;
}
.container div:nth-child(3n) {
height: 40px;
}
<div>
<div class="container">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
</div>
Some Text
How I can align bottom many divs, one on another. Like on a picture below.
You can use Flexbox to do this
Set flex-direction: column to position divs one on top of another
align-items: flex-end to move divs to right side of parent
justify-content: flex-end to move divs to bottom of parent.
.parent {
height: 300px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.box {
width: 100px;
height: 50px;
margin: 5px;
border: 1px solid black;
}
<div class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Update: To reverse order of divs you can use flex-direction: column-reverse and justify-content: flex-start
.parent {
height: 300px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
justify-content: flex-start;
}
.box {
width: 100px;
height: 50px;
margin: 5px;
border: 1px solid black;
}
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
You can use flexbox with flex-direction: column-reverse; and flex-wrap: wrap-reverse;:
.x {
width: 500px;
height: 500px;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
border: 1px solid red;
flex-grow: 0;
flex-basis: 0%;
}
.y {
width: 80px;
height: 80px;
border: 1px solid green;
margin: 3px;
}
<div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
<div class="y">4</div>
<div class="y">5</div>
</div>