Trying to setup a css grid layout for my app navigation bar, but I am having trouble getting the justify-content property to work. Here I am trying to set it to center, but what I really want is a layout where the gutter space expands according to the space available.
Fiddle of the problem:
https://jsfiddle.net/epch33vx/
My html:
<div class='test'>
<div class='item'>
1
</div>
<div class='item'>
2
</div>
<div class='item'>
3
</div>
<div class='item'>
4
</div>
</div>
My stylesheet:
.test {
display: grid;
grid-template-columns: repeat(4, minmax(56px, 80px));
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
justify-items: center;
}
.item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 56px;
font-size: 14px;
text-decoration: none;
}
Just replace justify-items: center; with justify-content: space-between;
From the spec (bold mine):
Note that certain values of justify-content and align-content can
cause the tracks to be spaced apart (space-around, space-between,
space-evenly)
.test {
display: grid;
grid-template-columns: repeat(4, minmax(56px, 80px));
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
justify-content: space-between;
}
.item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 56px;
font-size: 14px;
text-decoration: none;
}
<div class='test'>
<div class='item'>
1
</div>
<div class='item'>
2
</div>
<div class='item'>
3
</div>
<div class='item'>
4
</div>
</div>
Updated fiddle
I would say that display: flex;
justify-content: center;
align-items: center;
flex-direction: column; should go into test class.
Related
I have this card:
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
}
.do_container {
padding: 2px 16px;
}
<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between;">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>
How can I get the "GET IT" and "Like" to always be at the bottom of the card?
Setting the do_card to position: relative; and the div with "Get it" and "Like"
to position: absoulute; bottom:0px; does not work
To make sure the content set to absolute remains within the desired element (card in your case), make sure to set its parent to position: relative; (.do_card in your case)
It does seem to work for me as mentioned in the comment:
<style>
.do_card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 220px;
height: 320px;
position: relative;
}
.do_container {
padding: 2px 16px;
}
</style>
<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: 0 16px; left: 0;">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>
I would prefer a "non-absolute" solution whenever possible. In fact, you're able to achieve the layout with flexbox. Here's how:
First, you need to put your content inside the card into 2 blocks (top and bottom).
Then, you can use flex-direction: column; and justify-content: space-between; on the card.
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
/* vertical stretched alignment */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.do_card img {
max-width: 100%;
}
.do_container {
padding: 2px 16px;
}
.do_container_bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="do_card">
<!-- top -->
<div class="do_container">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<p style="text-align: center;">Lorem Ipsum</p>
</div>
<!-- bottom -->
<div class="do_container_bottom">
<i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
if you want button "GET IT" and "Like" to always be at the bottom of the card, you can set do_container to flex_grow: 1 to make it take as much space as possible and set the element inside with justify-content: space-between
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
/* add flex */
display:flex;
flex-direction: column;
}
img {
width:220px;
height:150px;
margin-left:auto;
margin-right:auto;
display:block;
}
.do_container {
padding: 2px 16px;
/* add flex-grow to make it fill the height of the container */
flex-grow: 1;
display: flex;
flex-direction: column;
/* make it space-between to set get_it and like button on bottom of card */
justify-content: space-between;
}
.title {
text-align: center;
}
.action_container {
display: flex;
justify-content: space-between;
}
p {
color:black
}
<div class="do_card">
<img src="https://picsum.photos/200/300">
<div class="do_container">
<p class="title">Lorem Ipsum</p>
<div class="action_container">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>
The image below is what I'm currently working with. I have a flex container taking up the whole width of the screen (a div with the red border), that contains two flex items: one being the white square, and the other being another flex container (with the blue border) containing the buttons.
What I'm trying to do is center the white square horizontally on screen, and have it so that when the window/screen is resized the button container div won't collide/come into the white square. I'm not sure how to go about this, so any help would be appreciated. My code is below the image.
<div class="middle-content-section">
<div class="drawing-pad-container"></div>
<div class="settings-container">
<button class="grid-toggle-button">Show grid</button>
<button class="grid-toggle-button">Hover to draw</button>
</div>
</div>
.middle-content-section {
margin-top: 50px;
display: flex;
gap: 50px;
width: 100%;
border: 1px solid red;
}
.settings-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
border: 1px solid blue;
}
.drawing-pad-container {
height: 500px;
width: 500px;
background: rgb(255, 255, 255);
filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
transition: 0.3s;
display: grid;
grid-template-rows: repeat(30, 1fr);
grid-template-columns: repeat(30, 1fr);
flex: 0 0 auto;
}
If you are simply trying to centre the white square in the div all you really need are some margins.
margin: 0 auto;
So I modified my answer to hopefully better fit your request. It is a little hacky but does seem to work.
What I did was create one more container called items which holds both interior items. I then set an auto margin on the container to centre both the white box and then settings bar. The bar was given a fixed width of 100px and therefore I did a transform: translateX(100px) which will then shift everything over by 100px correcting for the width and therefore offset cause by the settings bar.
Below is a code snippet of the result with the change spaced out.
.middle-content-section {
margin-top: 50px;
display: flex;
width: 100%;
border: 1px solid red;
}
.items {
margin: 0 auto;
transform: translateX(100px);
gap: 50px;
display: flex;
}
.settings-container {
width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
border: 1px solid blue;
}
.drawing-pad-container {
height: 500px;
width: 500px;
background: rgb(255, 255, 255);
filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
transition: 0.3s;
display: grid;
grid-template-rows: repeat(30, 1fr);
grid-template-columns: repeat(30, 1fr);
flex: 0 0 auto;
}
<div class="middle-content-section">
<div class="items">
<div class="drawing-pad-container"></div>
<div class="settings-container">
<button class="grid-toggle-button">Show grid</button>
<button class="grid-toggle-button">Hover to draw</button>
</div>
</div>
</div>
ref: coryrylan.com
section {
width: 200px;
border: 1px solid #2d2d2d;
display: flex;
justify-content: center;
align-items: center;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I have flex container and first element needs to align left and second center. I try different options with justify-content and align items => center so that the second element of this paging box is in the middle but there is no help.
This is css and html code
paging-section {
display: flex;
height: 60px;
}
/* .paging-section div {
flex: 1;
} */
.pagination-info {
align-items: flex-start;
margin-top: 15px;
background-color: red;
}
.pagination-box {
width: auto;
height: 38px;
margin: 20px 308px 369px 215px;
padding: 0 16px 0 16px;
border-radius: 4px;
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
border: solid 1px #d8dce6;
background-color: #ffffff;
display: flex;
background-color: yellow;
// justify-content: center;
// align-items: center;
}
<div class="paging-section">
<div class="pagination-info">
<p>
{{ size }}
{{ 'ADMIN.PAGINATION.RESULTS' | translate }}
</p>
</div>
<div class="pagination-box">
....
</div>
</div>
How to achieve that this yellow element is in the middle of the container and the first one remains on the left side ? Thanks
ive set fixed width to .pagination-info and also set margin: 0px auto; to .pagination-box at the end ive translate the .pagination-box to the left on half width of .pagination-info there is transform: translateX(-50px);
.paging-section {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
height: 60px;
}
/* .paging-section div {
flex: 1;
} */
.pagination-info {
align-items: flex-start;
background-color: red;
max-width: 100px;
width: 100px;
min-width: 100px;
word-break: break-all;
}
.pagination-box {
margin: 0px auto;
transform: translateX(-50px);
width: auto;
height: 38px;
padding: 0 16px 0 16px;
border-radius: 4px;
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
border: solid 1px #d8dce6;
background-color: #ffffff;
display: flex;
background-color: yellow;
// justify-content: center;
// align-items: center;
}
<div class="paging-section">
<div class="pagination-info">
<p>
{{ size }}
{{ 'ADMIN.PAGINATION.RESULTS' | translate }}
</p>
</div>
<div class="pagination-box">
....
</div>
</div>
This question already has answers here:
Can't get vertical scrollbar with justify-content: flex-end
(2 answers)
Closed 4 months ago.
I'm trying to "stack" divs on top of each other as new div boxes (.dialog-box) are added to the parent container (.dialog-container).
To stack the elements, I'm using the following on the parent:
display: flex;
flex-direction: column;
justify-content: flex-end;
I'd like to scroll that container for .dialog-boxs that are overflowing, yet with flex-box the overflow-y: scroll; is not scrolling.
Two boxes: (fill up container from bottom to top as expected):
Six boxes (expands outside the height of the container and should scroll):
SCSS:
.dialog-container {
border: 4px solid rgba(255, 255, 255, .4);
border-radius: 5px;
width: 300px;
height: 340px;
position: relative;
top: -50px;
margin: 0 auto;
overflow-y: scroll;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: flex-end;
.dialog-box {
width: 90%;
background: $dialogBoxWhite;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid $dialogBoxGreenBorder;
color: $dialogBoxGreenFont;
text-align: center;
margin-left: 5px;
padding: 5px;
display: inline-block;
p {}
}
}
HTML:
<div class="dialog-container">
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
</div>
You simply remove the
justify-content: flex-end;
Two boxes: (fill up container from bottom to top as expected):
for this you add below code to your scss file :
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
.dialog-container {
border: 4px solid rgba(0, 0, 0, .4);
border-radius: 5px;
width: 300px;
height: 350px;
position: relative;
margin: 0 auto;
overflow-y: scroll;
z-index: 5;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
}
.dialog-box {
width: 90%;
background:white;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid green;
color: green;
text-align: center;
margin-left: 5px;
padding: 3px;
display: inline-block;
}
<div class="dialog-container">
<div class="dialog-box">Box 1</div>
<div class="dialog-box">Box 2</div>
<div class="dialog-box">Box 3</div>
<div class="dialog-box">Box 4</div>
<div class="dialog-box">Box 5</div>
<div class="dialog-box">Box 6</div>
<div class="dialog-box">Box 7</div>
</div>
also show example in scroll-y working with flex-column
Try to change display: flex; to display: flex-box;
This will give you a scroll bar that actually scrolls. Additionally, your examples divs are all lacking closing tags.
https://jsfiddle.net/Lpw0726j/23/
<div class="dialog-container">
<div class="dialog-box">9</div>
<div class="dialog-box">8</div>
<div class="dialog-box">7</div>
<div class="dialog-box">6</div>
<div class="dialog-box">5</div>
<div class="dialog-box">4</div>
<div class="dialog-box">3</div>
<div class="dialog-box">2</div>
<div class="dialog-box">1</div>
</div>
.dialog-container {
border: 4px solid rgba(255, 255, 255, .4);
border-radius: 5px;
width: 300px;
height: 340px;
position: relative;
top: 50px;
margin: 0 auto;
z-index: 5;
display: flex-box;
flex-direction: column;
justify-content: flex-end;
overflow-y: auto;
background-color: teal;
.dialog-box {
width: 90%;
background: black;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid red;
color: green;
text-align: center;
margin-left: 5px;
padding: 5px;
display: inline-block;
p {}
}
}
I need a layout using flexbox, where 2 flex-items, item-1 should be aligned at top-center, while item-2 should be at bottom-center. I could not figure out how to do that.
See the below code:
.container{
padding:10px;
background: #fff;
border-radius:5px;
margin: 45px auto;
box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1);
}
.item{
color: #fff;
padding: 15px;
margin: 5px;
background: #3db5da;
border-radius: 3px;
}
.container{
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item{
/*margin: auto;*/
/*align-self: flex-start;*/
}
.item-4{
align-self: flex-start;
}
<div class="container">
<div class="item item-4">
Flex Item
<p>Vertical and horizontal align easy!</p>
</div>
<div class="item item-5"> bottom-center</div>
</div>
Here is fiddle link : https://jsfiddle.net/q5cw4xvy/
What you are looking for is justify-content: space-between; to align the items until the corners.
Add that to the .container and there you go.
.container{
/*justify-content: center;*/
justify-content: space-between;
}
On .item-4 you have align-self: flex-start; but you don't need that. just remove it.
https://jsfiddle.net/q5cw4xvy/2/
To better help you understand flexbox, there is a really nice css-tricks article.
Do you mean something like this?
https://jsfiddle.net/da4jdff7/1/
.container{
display: flex;
min-height: 50vh;
align-items: center;
flex-direction: column;
}
.item-5 {
margin-top: auto
}