I want to set flex items from left to right in flex-column layout.
What I have now
Desired Layout
My Code:
display:flex;
flex-direction: column;
align-items:flex-end;
justify-content: flex-start;
align-content: flex-end;
flex-wrap: wrap;
Use wrap-reverse flex-wrap: wrap-reverse;
.flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
justify-content: flex-start;
align-content: flex-start;
height: 400px;
}
.flex-item {
width: 50px;
height: 50px;
background-color: red;
margin: 5px;
}
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
add this code in css where you define display: flex
example:
.flex {
display: flex;
flex-direction: row-reverse;
}
.flex div {
height: 100px;
width: 100px;
background-color: red;
margin: 20px
}
<div class="flex" >
<div>
box -1
</div>
<div>
box -2
</div>
<div>
box -3
</div>
<div>
box -4
</div>
</div>
You can try out direction:column-reverse .You can read more about it here
Related
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I am trying to create a Bootstrap-like grid of cards using CSS flex properties. I have 10 cards (4 each row). However, when using justify-content: space-around (this is what I need), the last row is not aligning with the others (naturally). What is the workaround?
.card-gallery {
width: 100%;
height: auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
flex-direction: row;
}
.card-box {
width: 270px;
height: 400px;
background: red;
}
<div class="container">
<div class="card-gallery">
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
</div>
</div>
You could try CSS :last-child as in the example below to use different style in your last div.
.flexbox {
display: flex;
flex-flow: column;
}
.flex-child {
background: red;
align-content: center;
align-self: center;
}
.flex-child:last-child {
align-content: space-around;
align-self: flex-start;
}
<div class="flexbox">
<div class="flex-child">
one
</div>
<div class="flex-child">
two
</div>
<div class="flex-child">
three
</div>
</div>
By the way space-between and applying relative width to your card div works better.
.card-gallery {
width: calc(100% -2rem);
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
padding: 1rem;
}
.card-box {
width: 45%;
height: 40px;
background: #ff0;
align-self: center;
}
div.card-box:last-child {
align-self: flex-start;
}
<div class="container">
<div class="card-gallery">
<div class="card-box">1</div>
<div class="card-box">2</div>
<div class="card-box">3</div>
<div class="card-box">4</div>
<div class="card-box">5</div>
<div class="card-box">6</div>
<div class="card-box">7</div>
</div>
</div>
You can't achieve this easily with flexbox.
Instead, set .card-gallery to display:grid to make sure the cards always line up in a grid formation when multiple rows exist. Then give it this style rule:
grid-template-columns: repeat(auto-fill, 120px)
The auto-fill keyword will make sure the items will wrap when the viewport shrinks:
.container{max-width:479px;background:lightblue}
.card-gallery {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, 120px);
justify-content: space-around;
}
.card-box {
height: 100px;
background: #fff;
margin-bottom:30px;
border:solid 2px dodgerblue
}
<div class="container">
<div class="card-gallery">
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
</div>
</div>
So, I want to align items inside flex-box like in the above picture.
I have html as follows:
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
css as
.flex-row {
min-height: 400px;
display: flex;
align-items: flex-start;
}
.flex-item:nth-child(2) {
align-items: center;
}
.flex-item:last-child {
align-items: flex-end;
}
Use align-self not align-items
.flex-row {
min-height: 300px;
display: flex;
width: 90%;
margin: 1em auto;
border: 1px solid red;
justify-content: space-between;
}
.flex-item {
height: 50px;
background: lightblue;
width: 100px;
}
.flex-item:nth-child(2) {
align-self: center;
}
.flex-item:last-child {
align-self: flex-end;
}
<div class="container flex-row">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
Like so?
You need flex-wrap: wrap; In order to wrap the items need to be wide enough (100%). Since 100% flex item is always justified to the full width, you need text-align, not align-items which is the wrong property in the first place.
align-items is the alignment at the cross axis, not the main axis which would be justify-content
.flex-row {
min-height: 400px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.flex-item {
flex-basis: 100%;
}
.flex-item:nth-child(2) {
text-align: center;
}
.flex-item:last-child {
text-align: right;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
</div>
Look at this code
display:flex;
flex-direction: row;
justify-content: flex-start;
align-items: centre;
With flex-direction you specify le principal alignment (horizontal with row , vertical with column). Depending on what you choose here the following properties will have a different effect.
Then with justify-content you specify how your items inside your elements should align on the principal axis you just defined (vertical or horizontal).
In this case flex-start means at the beginning of my axis.
And with align-items you specify the alignment for the secondary axe.The vertical one because we choose flex-direction: row; and not flex-direction: column;. So in the vertical axis items will align at centre
And don't forget to take look at the available properties like space-between or flex-end
NOTE!
to set height to column change the px here:flex: 0 1 50px; or remove it!
Using margin-right/left:auto as:
.flex-row {
min-height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-item {
flex: 0 1 50px;
}
.flex-item:nth-child(2) {
margin-right: auto;
margin-left: auto;
}
.flex-item:last-child {
margin-left: auto;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
2. using align-self
.flex-row {
min-height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-item {
flex: 0 1 50px;
align-self: flex-start;
}
.flex-item:nth-child(2) {
align-self: center;
}
.flex-item:last-child {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
I ceated a flexbox grid and tried to make each item the same hight which is not working. Basically all those blue containers shall have the same height.
HTML:
<div class="outer">
<div class="item">
<h1>Contact</h1>
</div>
<div class="item">
<h3>Mail:</h3>
<a>john#doe.com</a>
<br>
<a>PGP</a>
</div>
<div class="item">
<h3>Telegram:</h3>
<a>www.t.me/doe</a>
</div>
</div>
CSS:
.outer {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
width: 100vw;
}
.item {
background-color: aqua;
flex: 1;
}
Photo:
I would add another element that is the only flex child of .outer, centered vertically, with the background applied to it, then make that element the flex parent that holds your 3 sections and aligns them.
.outer, .inner {
display: flex;
align-items: center;
}
.outer {
height: 100vh;
width: 100vw;
}
.inner {
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex: 1 0 0;
background-color: aqua;
}
.item {
flex: 1;
}
<div class="outer">
<div class="inner">
<div class="item">
<h1>Contact</h1>
</div>
<div class="item">
<h3>Mail:</h3>
<a>john#doe.com</a>
<br>
<a>PGP</a>
</div>
<div class="item">
<h3>Telegram:</h3>
<a>www.t.me/doe</a>
</div>
</div>
</div>
In a flexbox, when I use justify-content:space-between the first and last items are exactly aligned to the bounds of flex container where space is divided between them. How can I align first item to the right where other items are also aligned to the right (not to entire the width)?
The sample code below is not good because when I use flex-end, I have to set margin for items and so the first one in each row is not sticky to the right.
#flexcontainer{
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-end;
justify-content: flex-end;
background:#ff8800;
}
.flexitem{
display: -webkit-flex;
display: flex;
margin:20px;
width:24%;
background:#666666;
box-sizing:border-box;
height:50px;
}
<div id="flexcontainer">
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
</div>
and this is not also good because items are not aligned to the right (but entire the width):
#flexcontainer{
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
background:#ff8800;
}
.flexitem{
display: -webkit-flex;
display: flex;
margin:0;
width:24%;
background:#888888;
box-sizing:border-box;
height:50px;
}
<div id="flexcontainer">
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
</div>
My desired output in image (first one sticks to the right with no margin-right and the 4th one sticks to the left if 4 element exist and others align to the right if more than 4):
AFAIK the best you can achieve using a flexbox to achieve your desired output can be done manipulating the flex-basis and margin of the flexitems using this:
margin: 20px;
display: flex;
flex: 0 1 calc(25% - 40px);
The flex-basis of calc(25% - 40px) in the flex style divides the width into four adjusting for margin also.
Note I have set flex-grow disabled.
flex-end finishes it up.
Let me know your feedback. Thanks!
#flexcontainer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-end;
background: #ff8800;
}
.flexitem {
margin: 20px;
display: flex;
flex: 0 1 calc(25% - 40px);
background: #666666;
box-sizing: border-box;
height: 50px;
}
<div id="flexcontainer">
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
</div>
EDIT:
So I did some more adjustments to the margin calculations:
Change the flex-basis by reducing 10px more to adjust for removing the 20px each at the left and right ends of a row:
flex: 0 1 calc(25% - 30px);
For the rightmost / leftmost boxes to sit to the right / left edge:
.flexitem:nth-child(4n) {
margin-right: 0;
}
.flexitem:nth-child(4n + 1) {
margin-left: 0;
}
.flexitem:last-child {
margin-right: 0;
}
Give me your feedback on this. Thanks!
#flexcontainer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-end;
background: #ff8800;
}
.flexitem {
margin: 20px;
display: flex;
flex: 0 1 calc(25% - 30px);
background: #666666;
box-sizing: border-box;
height: 50px;
}
.flexitem:nth-child(4n) {
margin-right: 0;
}
.flexitem:nth-child(4n + 1) {
margin-left: 0;
}
.flexitem:last-child {
margin-right: 0;
}
<div id="flexcontainer">
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
</div>
I guess you could simply remove the right margin in your first example, is this how you wanted it to look?
#flexcontainer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-end;
background: #ff8800;
}
.flexitem {
margin: 20px;
margin-right: 0;
width: 24%;
background: #666666;
box-sizing: border-box;
height: 50px;
}
<div id="flexcontainer">
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
</div>
How can I make my flexbox with column direction children be same width.
JSFiddle Example:
https://jsfiddle.net/6ynofan5/
<div class="block">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
.block {
display: flex;
flex-direction: column;
align-items: center;
}
.block .title {
font-size: 30px;
}
.block .info {
display: flex;
justify-content: space-between;
}
Div with class .info should be the same width as .title, there should not be fixed width.
The equalising of widths is managed by align-items where the default is stretch. In this instance you have over-ridden this and so a wrapper is needed.
Then the two inner divs can be their natural 100% width.
.block {
display: flex;
flex-direction: column;
border: 1px solid grey;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
background: lightblue;
}
.info {
display: flex;
justify-content: space-between;
background: plum;
}
<div class="block">
<div class="wrap">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
</div>
.block {
display: table;
flex-direction: column;
align-items: center;
}
https://jsfiddle.net/1mz9f8p0/1/