I tried to make an ionic card start from bottom of the page using align-item: flex-end, but it did not affect.
This is the code:
<div class="align-page">
<div class="first-section">
<ion-chip [outline]="true" class="selected">One</ion-chip>
<ion-chip class="not-selected">Two</ion-chip>
<ion-chip class="not-selected">Three</ion-chip>
</div>
<div class="second-section">
<ion-card>
<ion-card-content>
<ion-card-subtitle>hi</ion-card-subtitle>
<ionc-item>
<ion-row style="height: 10px"></ion-row>
</ionc-item>
<ion-card-content>
</div>
</div>
.align-page{
display: flex;
flex-direction: column;
align-item: flex-end;
}
Replace flex-direction:column with
justify-content: flex-end;
The column is a flex container
But you have to justify also content to end. Default value is strech for justify-content.
Hope it works.
Related
I am trying to get the price under the annual plan.
.paymentsection {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
final image
The .plan and .price needs to be inside a div and then if display flex is applied to the paymentsection, you get your desired result.
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-container">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
</div>
.paymentsection {
display: flex;
flex-direction: row;
}
.plan-container{
flex-grow:1;
}
You need different flex boxes for implementation your image. Each flex box should have different direction. first you need to wrap your .plan div and .price div with another div. This help you to separate pricing component:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-wrapper">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
next you need to set flex direction to your new div element. this is your desire style:
.paymentsection {
display: flex;
}
.plan-wrapper{
display: flex;
flex-direction: column; /* default is row */
}
this changes should fix your issue.
To have the pricing aligned below the text, you'd have to nest the div further and specify the styles of the nested div to be oriented vertically, i.e, flex-direction: column.
You could do something like this:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="pricing">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
Styles for pricing class:
.pricing{
display:flex;
flex-direction: column;
}
i am so confused about flexbox. i tried to use it to align some inputs in a simple form but it won't work the way i was intending. first i did this:
.container {
width: 40vw;
display: flex;
justify-content: space-between;
}
and in html:
<div class="container">
<form id="location">
<input type="text" placeholder="Location">
<input type="submit" value="Get the weather!">
</form>
</div>
i was hoping the justify-content: space-between would add space between the two inputs so they floating out to the outer bounds of the container. not happening. after reading this: justify-content property isn't working i tried the following:
.container {
width: 40vw;
display: flex;
justify-content: center;
}
.item {
flex-grow: 1;
}
and in html
<div class="container">
<form id="location">
<div class="item"><input type="text" placeholder="Location"></div>
<div class="item"><input type="submit" value="Get the weather!"></div>
</form>
</div>
now it looks even worse, because the divs are on top of each other, instead of next to each other. adding flex-direction: row doesn't change a thing. any advice?
#location{
width: 40vw;
display: flex;
justify-content: space-between;
}
<div class="container">
<form id="location">
<div class="item"><input type="text" placeholder="Location"></div>
<div class="item"><input type="submit" value="Get the weather!"></div>
</form>
</div>
You have made .container div as your flex-container, which has only one flex-item #location form: You must make #location form your flex container so that it has two child elements to space-between your 400px width container And it will work fine
To brush up some fundamentals about flex-box visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If i understands correctly you need to add flexbox to parent. Your location is parent of the input elements.
.container {
width: 40vw;
#location {
display: flex;
justify-content: space-between;
}
}
This is happening because you are targeting the wrong element.
Flex works on a parent of the element that you want to move.
You want to move elements of the form, so you should apply flex to your form tag instead of the div.container.
Because the form tag is also just a div, not an element to be moved.
Here is solution to your problem : https://codepen.io/Juka99/pen/OJRmPVN
Try use flex box for #location.
The parent of 2 inputs, are form not container.
How can I center a Spinner in the middle of the page?
<div class="content-area" *ngIf="!document">
<div class="spinner">Loading...</div>
</div>
I try several combination of everything css-class with center in it, but did not work for me.
You can use flexbox. Add a class to the content area that implements use of flexbox on its children and then center the item with justify-content and align-items.
Here is the markup I'm referring to:
<div class="content-container">
<div class="content-area centered-content-area">
<div class="spinner">Loading...</div>
</div>
</div>
Here is the css to center the spinner:
.centered-content-area {
display: flex;
justify-content: center;
align-items: center;
}
Here is a stackblitz to see it working:
https://stackblitz.com/edit/clarity-v3-light-theme-hhfttg
I want to be able to create a div with a set size (in this example 100x100).
Then i want to be able to add x number of elements inside the div, in this example we can say 10 buttons with the size of 10x10 and align them vertically.
This means all buttons should be in a single column.
Then if i resize and make the new size 80x80 i should have 2 columns, the first with the first 8 buttons and then a new columns with the last 2 buttons.
I have tried with
flex-wrap: wrap;
display: flex;
flex-direction: column;
align-content: flex-start;
It aligns vertically but then when i resize the buttons keeps going over the bottom.
How can i align all elements so they are aligned vertically but if the height are not enought it should overflow into a new column. So no set number of columns since it could be x number of columns depending on the size.
Is this possible using css?
I think it only works when you give the container a maximum height. Is this what you need?
.container {
flex-wrap: wrap;
display: flex;
flex-direction: column;
align-content: flex-start;
max-height: 100px;
}
.button {
width: 100px;
height: 10px;
border: solid thin black;
}
<div class="container">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I have a div with two items in it. I put them in a column an needed the first item to justify: center and the second one to justify: flex-end. How do I do this?
HTML:
<div class="wrapper wrapper--login">
<h1 class="wrapper--login__title">
Demo or Die
</h1>
<a class="btn wrapper--login__btn" href="#">
Log in
</a>
</div>
css:
.wrapper--login{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
The wrapper need a height and the title margin: auto 0
Note, this will center the item in the available space left (container minus bottom element), not in the center of the container.
To center it relative to the container, check these posts:
center-and-bottom-align-flex-items
center-and-right-align-flexbox-elements
.wrapper--login{
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 200px;
}
.wrapper--login__title {
margin: auto 0;
}
<div class="wrapper wrapper--login">
<h1 class="wrapper--login__title">
Demo or Die
</h1>
<a class="btn wrapper--login__btn" href="#">
Log in
</a>
</div>