So I'm struggling to achieve this simple concept with CSS and i've also searched the entire internet but couldn't find anything. I think I'm just not wording it correctly so a visual image of what i'm trying to do is this:
The top box should be positioned on top and the bottom one should be positioned at the bottom. Then the boxes in between them should have equal spacing on top and bottom. This is more like the vertical version of this answer: https://stackoverflow.com/a/6880421/7150896
You can use Flexbox for this. You just need to set flex-direction: column and justify-content: space-between.
body,
html {
margin: 0;
padding: 0;
}
.content {
display: flex;
height: 250px;
border: 1px solid black;
justify-content: space-between;
flex-direction: column;
width: 200px;
}
.box {
background: #0479D9;
height: 50px;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
You can also achieve this using grid css layout:
.content {
display: grid;
align-content: space-between;
height: 275px;
border: 1px solid black;
width: 200px;
}
.box {
background: #0479D9;
height: 75px;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed last year.
.parent {
display: flex;
justify-content: flex-end;
background-color: lightgray;
}
.child {
width: 200px;
height: 200px;
background-color: gray;
border: solid black 1px;
}
.center {
margin: 0 auto;
background-color: black
}
<div class="parent">
<div class="child center"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
and this is what i've got.
It seems the black one is located in the a little left, not the "center" of the parent.
How can i fix this?
If you don't mind using grid instead of flexbox, you can utilize the property justify-self to align the black box to the center with the help of position: absolute;. The absolute positioning here makes it so it's possible to align the black box toward the center without minding/affecting the other two boxes. See the snippet below:
.parent {
display: grid;
justify-content: flex-end;
grid-auto-flow: column;
background-color: lightgray;
position: relative;
}
.child {
width: 200px;
height: 200px;
background-color: gray;
border: solid black 1px;
}
.center {
background-color: black;
justify-self: center;
position: absolute;
}
#media screen and (max-width: 992px) {
.parent{
display: flex;
flex-wrap: wrap;
}
.center {
position: relative;
}
}
<div class="parent">
<div class="child center"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
PS. I've added a #media query in case you want the 3 boxes to stack on a smaller space/screen.
Edit: Changed display on smaller screens and applied wrapping when necessary using flex-wrap.
More on justify-self and grid here and here respectively.
I have a simple grid layout, that has a limited height and scrolls.
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
The padding is being applied at the top, left and right of the grid:
But when I scroll down, the padding on the bottom isn't applied:
If I remove the max-height the padding at the bottom is now applied:
Why isn't the bottom padding being used? How can I ensure padding works on a grid item with limited height?
Clarity around overflow and padding is a current issue in the CSS spec and the behavior may differ based on each case.
Until the spec is clarified or browsers change their behavior, a workaround for your use case is to add an empty element at the end (since your padding is equal to the gap).
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
.outer::after {
content:"";
height:0.1px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
You need to wrap the inner content with a div/container and give the container the grid display, in that case the padding will be applied on that div.
.outer {
border: 1px solid red;
max-height: 150px;
overflow-y: scroll;
}
.outer-content {
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
HTML
<div class="outer">
<div class="outer-content">
<div class="inner">one</div>
<div class="inner">Two</div>
</div>
</div>
This question already has an answer here:
How to exclude the first item in a flexbox wrap?
(1 answer)
Closed 2 years ago.
Using Flex how can i create a layout , that has main parent div (container , display:flex) set.
The div1 to be in horizontal
div 2 and div 3 to be vertical as seen in the image.
I am new to flex and still learning
You can Achieve this even without flex, But if you need to do all the 3 div with flex then you can use this.
Here we put all the div in one contaner called main. And then we use flex property to make it a row. and then use flex-wrap to break apart. and then we give 100% to the first div as you wanted that in full width
HTML
<div id="main">
<div style="background-color:coral;" id="one">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
CSS
#main {
width: 100%;
height: 300px;
border: 1px solid black;
display: flex;
flex-wrap:wrap;
}
div{
width:200px;
}
#one{
flex:100%;
}
You can do something like this:
#MainDiv {
border: 1px solid black;
display: flex;
flex-direction: column;
height: 500px;
width: 700px;
}
.Column {
border: 1px solid red;
height: 30px;
margin: 10px;
}
.Rows {
display: flex;
flex-direction: row;
height: 450px;
width: 650px;
border: 1px solid teal;
margin: 10px;
}
.row {
height: 400px;
width: 300px;
border: 1px solid red;
margin: 10px;
}
<div id="MainDiv">
<div class="Column">Horizontal </div>
<div class="Rows">
<div class="row">Vertical Left</div>
<div class="row">Vertical Right</div>
</div>
</div>
You can use flex: 1 without specifying size in pixel for each box
.row {
display: flex;
flex-direction: row;
width: 100%;
}
.col {
border: 1px solid red;
flex: 1;
}
<div class="row">
<div class="col">One</div>
</div>
<div class="row">
<div class="col">Two</div>
<div class="col">Three</div>
</div>
There is container:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
Block class="container" has height of screen height.
How to make the same height for block1, block2? so that they occupy the entire height of the parent?
I have tried flex
grid can help you here without even setting an height which can be optionnal , mind box-sizing if height, borders and paddings are involved:
.container {
display: grid;
grid-template-rows: repeat(2, 1fr);/* the keyword for the value : 1fr */
}
.container>div {
border: solid;
}
<div class="container">
<div class="block1">give<br>me<br>some<br>heights</div>
<div class="block2"></div>
</div>
usefull link to know more about it https://css-tricks.com/snippets/css/complete-guide-grid/
flex would be for te browser's height:
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.container>div {
flex: 1;
border: solid;
margin: 2px;
/* possible*/
}
/* reset */
body {
margin: 0;
height: 100vh;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
You can use flex to get this done. You could also use float and set the height of the blocks to 100% and the widths of them to 50%.
.container {
height: 100vh;
display: flex;
flex-direction: column;
border: 4px red solid;
}
.block1, .block2 {
height: 50%;
}
.block1 {
border: 4px green solid;
}
.block2 {
border: 4px blue solid;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
this is my first question here, but I've read many Java answers which helped me a lot. I did some research before, but don't hesitate to tell me if I duplicated a question or am doing anything wrong.
I'm trying to create a thumbnails gallery and I made a jsfiddle here.
HTML
<body>
<div id="main">
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
CSS
#main {
background-color: rgba(255, 105, 180, 0.5);
height: 100vh;
padding: 10px;
}
#wrapper {
background-color: blue;
display: inline-block;
padding: 5px;
}
.box {
display: inline-block;
background-color: red;
width: 200px;
height: 200px;
margin: 5px;
}
I would like to center the red boxes in the main div, but not like text-align: center;, align the boxes left-to-right between them, and center the whole block. So I thought, why not make a wrapper div and center it ?
This is where my problem is, I would like the blue wrapper to be no larger than its content, but it fills the main div.
An answer here says inline-block should solve the issue but I can't figure out how.
The whole thing surely can be made quite easily, so what am I missing ?
If TLDR, I made some snapshots here : http://imgur.com/a/a2Fjg
Thanks a lot !
You can solve it via CSS, but in this way you should write a lot of mediaqueries with hardcoded values. I recommend you do this magic with javascript:
1) Get available width
2) Calculate, how many blocks in one row can appear
3) Get required width and set it for wrapper-container
So the reason why your content is expanding to fit 100% of the space available is that as the boxes are 'inline-block' they are situated within a line (think line of text) that will take up 100% of the width if it wraps. The browser doesn't know your intention and treats this exactly like text which, normally, we would want to behave like this.
In order to change this we will need to either :
Specify the maximum width of the container.
Specify the number of elements that can be contained on one line before wrapping.
Either way we do have to hardcode some assumptions/limitations (without involving any script or complex media queries etc).
Specifying the maximum width of the wrapper is probably the most straightforward way - like this:
body{
width:100%;
}
#main {
background-color: rgba(255, 105, 180, 0.5);
height: 100%;
padding: 10px;
width:100%;
}
#wrapper {
background-color: blue;
display: block;
padding: 5px;
max-width:640px;
margin: 0 auto;
}
.box {
display: inline-block;
background-color: red;
width: 200px;
/* If you want it to shrink rather than wrap you could say
width: calc((100% / 3) - 15px);*/
height: 200px;
margin: 5px;
}
JS Fiddle: https://jsfiddle.net/Chipmo/z30fLv0v/
Specifying the number of elements before wrap is a bit more tricky. The solution I have found is to add <br> tags after each box and then selectively activate them using the nth-child selector. I'm sure there'll be a way of doing this which doesn't involve extraneous tags - perhaps with display: table shenanigans or flexbox, but this works and shows the basic concept.
JS Fiddle: https://jsfiddle.net/Chipmo/xsf6c7e5/
SO snippets below:
Max-width
body{
width:100%;
}
#main {
background-color: rgba(255, 105, 180, 0.5);
height: 100%;
padding: 10px;
width:100%;
}
#wrapper {
background-color: blue;
display: block;
padding: 5px;
max-width:640px;
margin: 0 auto;
}
.box {
display: inline-block;
background-color: red;
width: 200px;
/* If you want it to shrink rather than wrap you could say
width: calc((100% / 3) - 15px);*/
height: 200px;
margin: 5px;
}
<body>
<div id="main">
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
Number of elements
#main {
background-color: rgba(255, 105, 180, 0.5);
height: 100%;
padding: 10px;
text-align: center;
}
/*needs 2 ID's to gain higher precedence than the text-align center from above */
#main #wrapper {
background-color: blue;
display: inline-block;
padding: 5px;
text-align: left;
}
.box {
display: inline-block;
background-color: red;
width: 200px;
height: 200px;
margin: 5px;
}
#wrapper br {
display: none;
}
/*change to 8n for every fourth, 4n for every 2nd etc etc
You will probably want to use media queries with this */
#wrapper br:nth-child(4n) {
display: block;
}
<body>
<div id="main">
<div id="wrapper">
<div class="box"></div><br>
<div class="box"></div><br>
<div class="box"></div><br>
<div class="box"></div><br>
<div class="box"></div><br>
<div class="box"></div><br>
<div class="box"></div><br>
</div>
</div>
</body>
Use flexbox. This is the heart of the design:
#wrapper {
background-color: blue;
height: auto;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: space-between;
flex-wrap: wrap;
}
Added 2 invisible boxes at the bottom to push the last red box to the left.
FIDDLE
SNIPPET
html,
body {
width: 100%;
height: 100%;
}
#main {
width: 100vw;
max-width: 640px;
height: auto;
background-color: rgba(255, 105, 180, 0.5);
padding: 10px;
}
#wrapper {
background-color: blue;
height: auto;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: space-between;
flex-wrap: wrap;
}
.box {
display: block;
background-color: red;
margin: 2.5px auto 10px;
width: 200px;
height: 200px;
}
.space {
background: none;
}
<body>
<div id="main">
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="space box"></div>
<div class="space box"></div>
</div>
</div>
</body>