Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
I am trying to place two divs one below another. Both should also be positioned towards right. So I am using margin-left:auto and margin-right:0 . I am unable to find a solution on how to place them below each other as well as position them towards right.
Any help will be appreciated . Thanks
make a container div place both your divs inside.
use display:flex on the container & change the direction with flex-direction:column to make them on top of each other. now use align-items:flex-end to push them to the end.
.box1 {
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
.container {
display: flex;
width:100vw;
flex-direction: column;
align-items: flex-end;
}
<div class=container>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<div class="parent">
<div class="divs"></div>
<div class="divs"></div>
</div>
In your css:
.divs{
background-color: blue;
height: 150px;
width: 150px;
margin: 10px;
}
.parent{
display: flex;
flex-direction: column;
align-items: flex-end;
}
By adding display: flex to the parent div with align-items: flex-end
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
Hello I need to somehow integrate the day mark of the below datepicker. Can it be done with css? or do you have any suggestions
you can do something like this using css + inline svg:
.container{
width: 420px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.day{
width: 33.33%;
padding: 30px 0;
font-size: 48px;
font-weight: bold;
position: relative;
text-align: center;
}
.day.active{
color: white;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20112%20112%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20width%3D%22112%22%20height%3D%22112%22%20ry%3D%2222.487616%22%20fill%3D%22%23c2c7cf%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M21.70009%200C8.75088.89667%201.02185%2010.043165%200%2020.405879V91.59215C1.160088%20102.17478%209.220977%20111.21852%2021.70009%20112l56.36821-.33137c9.38109-.2579%2015.19012-4.06833%2018.86948-12.82354l11.54876-29.49999c1.59348-4.10288%203.51225-6.713551%203.51346-13.345101-.001-6.63155-1.91998-9.24222-3.51346-13.3451l-11.54876-29.5C93.25842%204.39969%2087.44939.58927%2078.0683.33137Z%22%20fill%3D%22%231c2a4b%22%2F%3E%0A%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}
<div class="container" >
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day active">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div/>
I think you can't do with css.
I think you have to refactor a datepicker using javascript.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a container with multiple divs (more than 2):
<div class="container">
<div></div>
<div></div>
<div></div>
...
</div>
And I want to center these divs (one div in every line) when screen size is too small to fit all. How can I implement this using pure CSS3?
The answer is Flexbox.
#media only screen and (max-width: 400px) {
.container {
display: flex;
flex-direction: column;
align-items: center;
}
}
<div class="container">
<div>test</div>
<div>test</div>
<div>test</div>
</div>
Modern centering method using flex, this is all you need for centering anything:
display: flex;
justify-content: center;
align-items: center;
And you can apply flex-direction to make the element inside flex container align horizontal or vertical. So the result look like below:
.container {
height:100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.container div {
margin: 10px;
width:60vw;
height: 10vh;
background: green;
}
#media only screen and (max-width: 400px) {
.container {
flex-direction: column
}
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
This would center the div but when the multiple div can be fit in a line, it would make inconsistency in the number of div's in each line.
.container{
text-align: center;
}
.container div{
height: 50px;
width: 300px;
display: inline-block;
background-color: red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
So here is the trouble Im having. Im kind of trying to make a flexbox inside of a flexbox. Im not sure how to explain it so I drew it out to try to make it easier. It will start it an outer div that I call the grandparent div. Inside this dive will be three divs that I call the parent divs. inside each of those divs will be 2 divs that I call the child divs.
When it is viewed in computer mode the 3 parent divs will be side by side with the child divs on top of each other inside.
When it is in tablet mode it will the parent divs will be on top of each other with the child divs side by side.
When it is in cell phone mode it will have the parent divs on top of each other with the child divs on top of each other as well.
I drew a picture to give a better idea. If anyone can help you have no clue how thankful I will be
Sketch of what Im trying to go for
RESULT
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grandparent {
width: 100vw;
border: 10px solid green;
display: flex;
flex-direction: column;
}
.parent {
border: 10px solid red;
margin: 10px;
display: flex;
flex-direction: column;
}
.child {
height: 200px;
margin: 10px;
border: 10px solid blue;
flex: auto;
}
#media screen and (min-width: 700px) {
.parent {
flex-direction: row;
}
}
#media screen and (min-width: 900px) {
.grandparent {
flex-direction: row;
}
.parent {
flex-direction: column;
flex: 1;
}
}
HTML
<div class="grandparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
LIVE
https://codepen.io/wilsonbalderrama/pen/yLyRZpM
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am styling some social media icons on this site artpenleystudios.com . They are aligned okay at the moment, however I was hoping to use 'flex' properties to make it neater, specifically at certain screen sizes. I would like the 4 icons to display equally spaced, vertically and horizontally in a 2 x 2 grid and also display perfectly spaced and centred 4 x 1 when the screen size changes (via media queries). If anyone has a solution to this then I would be greatly appreciative.
Did you think about something like that here?
HTML:
<div class="master">
<div class="group">
<div class="item item-1">
<img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/instagram.svg">
</div>
<div class="item item-2">
<img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/facebook.svg" alt="Art Penley Studios - Facebook">
</div>
</div>
<div class="group">
<div class="item item-3">
<img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/soundcloud.svg" alt="Art Penley Studios - Soundcloud">
</div>
<div class="item item-4">
<img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/vimeo.svg" alt="Art Penley Studios - Vimeo">
</div>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: black;
}
.master {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: center;
align-items: stretch;
padding: 20px;
}
.group {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
background-color: white;
}
.item {
flex: 1 1 auto;
text-align: center;
}
img {
width: 150px;
height: 150px;
padding: 60px;
}
CODEPEN
This is just a draft. Not sure I understand your question well.
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
You can override align-items with align-self for a flex item.
I am looking for a way to override justify-content for a flex item.
If you had a flexbox container with justify-content:flex-end, but you want the first item to be justify-content: flex-start, how could that be done?
There doesn't seem to be justify-self, but you can achieve similar result setting appropriate margin to auto¹. E. g. for flex-direction: row (default) you should set margin-right: auto to align the child to the left.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: flex-end;
}
.block {
width: 50px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
<div class="container">
<div class="block justify-start">justify-start</div>
<div class="block"></div>
</div>
¹ This behaviour is defined by the Flexbox spec.
AFAIK there is no property for that in the specs, but here is a trick I’ve been using:
set the container element ( the one with display:flex ) to justify-content:space-around
Then add an extra element between the first and second item and set it to flex-grow:10 (or some other value that works with your setup)
Edit: if the items are tightly aligned it's a good idea to add flex-shrink: 10; to the extra element as well, so the layout will be properly responsive on smaller devices.
If you aren't actually restricted to keeping all of these elements as sibling nodes you can wrap the ones that go together in another default flex box, and have the container of both use space-between.
.space-between {
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.default-flex {
border: 1px solid blue;
display: flex;
}
.child {
width: 100px;
height: 100px;
border: 1px solid;
}
<div class="space-between">
<div class="child">1</div>
<div class="default-flex">
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
Or if you were doing the same thing with flex-start and flex-end reversed you just swap the order of the default-flex container and lone child.
I solved a similar case by setting the inner item's style to margin: 0 auto.
Situation: My menu usually contains three buttons, in which case they need to be justify-content: space-between. But when there's only one button, it will now be center aligned instead of to the left.
For those situations where width of the items you do want to flex-end is known, you can set their flex to "0 0 ##px" and set the item you want to flex-start with flex:1
This will cause the pseudo flex-start item to fill the container, just format it to text-align:left or whatever.
To expand on Pavlo's answer https://stackoverflow.com/a/34063808/1069914, you can have multiple child items justify-content: flex-start in their behavior but have the last item justify-content: flex-end
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: flex-end;
}
.container > *:not(:last-child) {
margin-right: 0;
margin-left: 0;
}
/* set the second to last-child */
.container > :nth-last-child(2) {
margin-right: auto;
margin-left: 0;
}
.block {
width: 50px;
background: tomato;
border: 1px solid black;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block" style="width:150px">I should be at the end of the flex container (i.e. justify-content: flex-end)</div>
</div>