This question already has answers here:
How to keep wrapped flex-items the same width as the elements on the previous row?
(14 answers)
Closed 13 days ago.
Here is the playground :
.container {
width: 500px;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
justify-items: flex-start;
gap: 1rem;
padding: 1rem;
box-sizing: border-box;
border: 1px solid salmon;
}
.item {
flex: 1 1 auto;
min-width: 50px;
height: 6rem;
padding: 1rem;
box-sizing: border-box;
background-color: teal;
border-radius: 0.4rem;
display: grid;
place-items: center;
font-size: 1.25rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
}
<div class="container">
<div class="item">Some content</div>
<div class="item">Some content</div>
<div class="item">Some content</div>
<div class="item">Some content in the item</div>
</div>
As you can see the last item is taking the remaning space, I would like it not to, and instead take the space required by the text. How should I proceed ?
I am aware I can use grid layout for this, but I would like to stay on flex layout.
This is the last-child implementation suggested by the other answer. It does what you literally ask for in your question, but I'm not sure it's what you are really going after.
.container {
width: 500px;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
justify-items: flex-start;
gap: 1rem;
padding: 1rem;
box-sizing: border-box;
border: 1px solid salmon;
}
.item {
flex: 1 1 auto;
min-width: 50px;
height: 6rem;
padding: 1rem;
box-sizing: border-box;
background-color: teal;
border-radius: 0.4rem;
display: grid;
place-items: center;
font-size: 1.25rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
}
.item:last-child {
flex: 0 0 auto;
}
<div class="container">
<div class="item">Some content</div>
<div class="item">Some content</div>
<div class="item">Some content</div>
<div class="item">Some content in the item</div>
</div>
You could always use :last-child, here is the link with article about this, so you can read through it and try to implement it on your own.
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>
By design flex is (initially) a single lane of content and wasn't made specifically for grids.
I currently use flex-wrap: wrap; but it's not really made for making grids -- even though it's probably the first option you try to make one.
Moreover I think it's not the only way to create grid-like layouts.
So is this the most accurate (proper) way? of creating a grid in flex?
Or are there better alternatives?
Edit (after 2 answers were posted): just to clarify, I'm not looking for display: grid; I'm asking what is the most proper/accurate way of doing it in flex. (See css flex grid)
(Of course display: grid is a proper way for making grids with CSS grid. That is not what the question is asking.)
My advise is to go with display: grid.
To get started you have to define a container element as a grid with
display: grid, set the column and row sizes with grid-template-columns
and grid-template-rows, and then place its child elements into the
grid with grid-column and grid-row.
This is an useful post about https://css-tricks.com/snippets/css/complete-guide-grid/
And this is a complete example:
The style:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 1px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
font-size: 30px;
text-align: center;
}
and the layout:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
so i came up with this its not perfect but you could tweak it to make it what you want i think...https://codepen.io/colinthedev/pen/ExKwVVZ
document.getElementsByTagName("h1")[0].style.fontSize = "6vw";
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.mainWrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.flexWrapOne {
display: flex;
flex-direction: row;
width: inherit;
margin: 0 .5rem 0 1rem;
justify-content: center;
align-items: center;
}
.item1 {
display: flex;
order: 1;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 15rem;
width: 20rem;
margin: .5rem;
background: #000;
}
.item2 {
display: flex;
order: 2;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 10rem;
margin: .5rem;
background: #0D89F2;
}
.item3 {
display: flex;
order: 3;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 15rem;
width: 33rem;
margin: .5rem;
background: #89F20D;
}
.flexWrapTwo {
display: flex;
flex-direction: column;
}
.item4 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 20rem;
margin: .5rem;
background: #000;
}
.item6 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 10rem;
margin: .5rem;
background: #0D89F2;
}
#media screen and (max-width: 1430px) {
.flexWrapTwo {
flex-direction: row;
}
.item4 {
order: 2;
}
.item6 {
order: 1;
}
}
#media screen and (max-width: 1250px) {
.mainWrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.flexWrapOne {
flex-direction: column;
width: inherit;
}
}
<h1>👋 Hello World!</h1>
<div class="flexWrapOne">
<h1 class="item1"> ITEM-1 </h1>
<h1 class="item2"> ITEM-2 </h1>
<h1 class="item3"> ITEM-3 </h1>
</div>
<div class="mainWrapper">
<div class="flexWrapOne">
<h1 class="item1"> ITEM-4 </h1>
<h1 class="item2"> ITEM-5 </h1>
<h1 class="item3"> ITEM-6 </h1>
</div>
<div class="flexWrapTwo">
<h1 class="item4"> ITEM-7 </h1>
<h1 class="item6"> ITEM-8 </h1>
</div>
</div>
<!-- Same as above just copy pasted -->
<div class="flexWrapOne">
<h1 class="item1"> ITEM-1 </h1>
<h1 class="item2"> ITEM-2 </h1>
<h1 class="item3"> ITEM-3 </h1>
</div>
<div class="mainWrapper">
<div class="flexWrapOne">
<h1 class="item1"> ITEM-4 </h1>
<h1 class="item2"> ITEM-5 </h1>
<h1 class="item3"> ITEM-6 </h1>
</div>
<div class="flexWrapTwo">
<h1 class="item4"> ITEM-7 </h1>
<h1 class="item6"> ITEM-8 </h1>
</div>
</div>
In the following code:
HTML
<div class="cards-wrapper">
<div class="cards_item">
<div class="card">
<div class="card__header">
<div class="=card__title">
<div>title</div>
</div>
</div>
<div class="card__content">
<p class="card__description">Some text</p>
<p class="card__frequency">more text</p>
</div>
<div class="card__footer">
<div class="card__tick"><input type="hidden" value="0"><label class="checkbox-container"><input type="checkbox" class="list-checkbox" value="false"><span class="checkmark"></span></label></div>
<div class="card__see">Even more</div>
</div>
</div>
</div>
</div>
SCSS
.cards-wrapper {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
outline: 2px solid blue
}
.cards_item {
display: flex;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: 0.5rem;
}
.card {
position: relative;
flex: 0 1 100%;
justify-self: stretch;
box-sizing: border-box;
padding: 0.625rem;
overflow: hidden;
&__header {
display: flex;
flex-direction: row;
align-items: center;
}
&__title {
margin: 0;
}
&__frequency {
margin-bottom: 80px;
}
&__footer {
position: absolute;
bottom: 0.8rem;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
outline: 2px solid red;
}
}
Why does .card__footer div with a width of 100% wider than its container?
It fits in the container if you change its width to 90%.
But something seems to be not right here.
Can someone help me please with this?
I see that the container div has padding to it.
can you try this width value on your footer?
width: calc(100% - 1.25rem);
since you are using scss
calc(100% - 2*0.625rem)
I know I can easily achieve this kind of layout using the css float which is the current way I have the divs have the layout right now. But, I am trying to recode it and change it to flex alignment.
Here is my markup:
<div id="the-posts">
<div class="the-post-inner">
<a href="#">
<div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
<div class="content"><h2>Post 1</h2></div>
</a>
<a href="#">
<div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
<div class="content"><h2>Post 2</h2></div>
</a>
<a href="#">
<div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
<div class="content"><h2>Post 3</h2></div>
</a>
</div>
</div>
And here is my CSS:
.the-post-inner {
clear: both;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.the-post-inner a {
margin-bottom: 4%;
}
.the-post-inner a .image {
padding-bottom: 60%;
}
.the-post-inner a .content {
padding: 20px;
}
.the-post-inner a .content h2 {
margin: 0;
}
.the-post-inner a:first-child {
flex: 0 0 60%;
margin-right: 4%;
}
.the-post-inner a:not(:first-child) {
margin-right: 0;
flex: 0 0 36%;
align-self: flex-start;
overflow: hidden;
float: left;
display: block;
}
I tried several codes based on the answers in other posts but I can't seem to make this work.
Thanks in advance for the suggestions.
EDIT:
I was wondering if there is a way to achieve this without changing the current markup which is not to separate the left post in another div and the right posts in another container.
https://jsfiddle.net/pextb1of/
I just put some fix. maybe will help you.
.the-post-inner {
clear: both;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
flex-direction: column;
height: 100px;
border: 1px solid #000;
}
a {
/*border: 1px solid #000;*/
margin-bottom: 4%;
/*padding: 20px;*/
}
.the-post-inner {
flex: 0 0 60%;
margin-right: 4%;
}
.sec-inner {
margin-right: 0;
flex: 0 0 36%;
align-self: flex-start;
flex-direction: column;
overflow: hidden;
float: left;
display: flex;
}
#the-posts{
display: flex;
flex-direction: row;
}
<div id="the-posts">
<div class="the-post-inner">
Post 1
</div>
<div class="sec-inner">
Post 2
Post 3
</div>
</div>
I have a flexbox parent setted with flex-direction: row.
Inside this parent, I have two children. I would like them to have the same height!
Inside this children I have dynamic content (with variable height).
The way I'm doing, if I add text on the right child, the left one will grow.
But If the left child grows, the right one stays small.
Should not they behave in the same way?
Here is a fiddle: https://jsfiddle.net/4g6uevok/8/
HTML:
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">#1</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#2</div>
<div class="left-area-row-info">B</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#3</div>
<div class="left-area-row-info">AC</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
CSS:
#main {
width: 100%;
height:auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left{
width: 400px;
display: flex;
flex-direction: column;
background:lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color:#525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin:0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin:0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
height: 100%;
display: flex;
flex-direction: column;
background:orange;
align-items: stretch;
}
Flex items are aligned to strech by default. Your height:100% value in .right class preventing it to take whole height so try to remove height:100% to the .right element
#main {
width: 100%;
height: auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left {
width: 400px;
display: flex;
flex-direction: column;
background: lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color: #525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin: 0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin: 0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
display: flex;
flex-direction: column;
background: orange;
align-items: stretch;
}
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">
#1
</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#2
</div>
<div class="left-area-row-info">BA</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#3
</div>
<div class="left-area-row-info">C</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#4
</div>
<div class="left-area-row-info">D</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>