I am styling a cart in angular. I am trying to get the price to be all the way to the right of the cart however it is not applying.
I tried using space-between and I tested it on the outer div and it worked, but when I try to apply on the inner div it doesn't work. What am I missing or just plain not understanding here?
here is a pen of the code
https://codepen.io/awschneider-dev/pen/rNedLJg
HTML Below
<div class="container">
<h2>Cart</h2>
<div class="cartProducts" *ngFor="let item of items">
<!-- <input type="checkbox" name="deleteItem" id=""> -->
<hr>
<div class="item">
<div class="itemImage">
<img class="productImage" src="../../assets/images/phones/{{item.image}}" alt=""/>
</div>
<div class="information">
<div class="description">
Link to Item Page
</div>
<div class="price">
{{item.price | currency}}
</div>
</div>
</div>
</div>
</div>
CSS Below
div.item{
display: flex;
}
div.information{
display: flex;
justify-content: space-between;
flex-direction: row;
}
div.container{
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
div.itemImage{
min-width: 150px;
}
img.productImage{
max-width: 100px;
max-height: 150px;
margin: 10px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 1.0em;
margin-right: 1.0em;
border-style: inset;
border-width: 1px;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
a.fakeLink{
font-weight: 750;
font-size: larger;
text-decoration: none;
color: #0645AD;
}
Resources I accessed below.
How to fix flex box with justify-content space between
Justify-content: space-between works incorrect
Any and all help would be appreciated.
To make it work, you can set the width of div.information.
For example:
div.information{
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%; /* use any value you want */
}
Add the following property in your css rule:
div.information{
display: flex;
justify-content: space-between;
flex-direction: row;
flex-grow: 2; // add this line
}
Related
So basically I am trying to make all my div boxes one size but a unique color. I currently have just done it in CSS below. However I know this isn't efficient, calling out each box with a specific class and changing the color. Is there a better way in CSS?
<div class='containera'>
<div class='box1a'>#c37857</div>
<div class='box2a'>#eeedbe</div>
<div class='box3a'>#99b27f</div>
</div>
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box1a,.box2a,.box3a{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
Create a new class then add that class name onto the element you want.
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box-size{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
<div class='containera'>
<div class='box-size box1a'>#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
You can give div a comprehensive style using * and set separate classes for each box with your favorite colors
you can write inline css... you should use !important to make sure that inline css overwrites class
<div class='containera'>
<div class='box-size box1a' style="background-color:red !important;">#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
I have problem with my CSS of navigation bar. I want to align items to the center of purple div, but there are spaces between texts. How I can achieve alignment without these spaces?
Screen:
Code:
<div class="navbar">
<h1 class="logo">ab</h1>
<p class="items">O nás</p>
<p class="items">Reference</p>
<p class="items">Blog</p>
</div>
<style>
.navbar{
margin: 30px;
padding: 10px;
height: 100px;
background: red;
display: flex;
}
.navbar .logo{
font-size: 50px;
}
.navbar .items{
float: left;
display: flex;
flex-grow: 1;
justify-content:center;
background: blueviolet;
align-items: center;
}
</style>
The flex-box always takes as much space as it needs to fill the box.
All your p.items are flex and the covered div is also flex.
The p has flex-grow: 1 so they will have the same width inside the covered div.
The solution to this problem is create another div to cover all your items and remove display: flex and flex-grow: 1 from your items class, so the spaces between your text will be removed.
<div class="navbar">
<h1 class="logo">ab</h1>
<div class="d-flex">
<p class="items">O nás</p>
<p class="items">Reference</p>
<p class="items">Blog</p>
</div>
</div>
<style>
.navbar{
margin: 30px;
padding: 10px;
height: 100px;
background: red;
display: flex;
}
.navbar .logo{
font-size: 50px;
}
.navbar .d-flex {
display: flex;
flex-grow: 1;
background: blueviolet;
justify-content: center;
align-items: center;
}
.navbar .items{
margin: 0 10px;
}
</style>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 2 years ago.
I am using flex-wrap. if textBox are more then width available in container
and in the end there is add button now if things are in single line it's look perfect
but if there are more textBox then width available it shift to next line thats fine but because of that there is too much space left between button and text box
which looks very odd.. i tried many ways but didn't get succeed to place button just next to textBox of 1st line.
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
If you add a rule for the individual flex-lines like justify-content: space-between; Or jsutify-content: space-evenly. It will adjust to whatever number of Elements you add and display them in a more responsive way. See the examples below.
Edit: at the end you can find a 3rd example which uses specific margin-rules instead of flex-rules. I personally dont prefer this but it could look neater in your case.
with space-between
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
with space-evenly
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
margin-rules, commented the css code where i changed it
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
/*new margin-rules*/
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
HTML:
<div id="content">
<div class="card">
<span class="card-title">Album</span>
<div class="card-content">
<img class="album-thumbnail" src="a.jpg">
<img class="album-thumbnail" src="b.jpg">
<img class="album-thumbnail" src="c.jpg">
<img class="album-thumbnail" src="d.jpg">
</div>
</div>
</div>
CSS:
.card {
background-color: white;
margin: 0 2em 2em 0;
display: inline-flex;
flex-direction: column;
padding: 1.5em;
border: 1px solid black;
}
.card-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
max-height: 300px;
}
.album-thumbnail {
width: 150px;
margin: 1px;
}
In the browser I can see two columns of images, but the width of card-content ends where the first column ends. What causes this and how can I solve it?
This is how it looks currently:
Cause you have a duplicate for display in this code section:
.card {
background-color: white;
margin: 0 2em 2em 0;
display: flex;
flex-direction: column;
padding: 1.5em;
border: 1px solid black;
display: inline-block;
}
Remove this line display: inline-block; and it should work just fine. Here's a replica jsfiddle of the problem with the applied solution
Here's a screenshot with your element inspected:
Another thing you should remove if you don't want space around the columns is align-items: center; inside the class .card-content.
Open the updated fiddle to see the changes.
I'm trying to achieve the following result using flexbox:
I tried the with the following html but I can't get it to work.
<div class=" flex-center">
<div class="flex-item-center">
<p>
Some text in box A
</p>
</div>
<div class="flex-item-bottom">
<p>Some text in box B....</p>
</div>
</div>
CSS:
.flex-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.flex-item-center {
align-self: center;
}
.flex-item-bottom {
align-self: flex-end;
}
How can I make it look like the image?
I've made a posible solution.
.flex-center {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
height: 400px;
}
.flex-center-bottom {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
align-items: center;
}
.flex-item-center {
border: solid 2px #4675AA;
order: 0;
flex: 0 1 auto;
align-self: center;
}
.flex-item-bottom {
border: solid 2px #4675AA;
order: 1;
flex: 0 1 auto;
align-self: flex-end;
}
<div class="flex-center">
<div class="flex-item-center">
<p>DROP FILES HERE</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Hint: You can also drop files in the all files page</p>
</div>
</div>
Update 2017: Tested in Google Chrome Versión 62.0.3202.89 (Build oficial) (32 bits).
.flex-center,
.flex-center-bottom {
align-items: center;
background-color: #739FD0;
color: #000000;
display: flex;
}
.flex-center {
height: 400px;
justify-content: center;
}
.flex-center-bottom {
justify-content: flex-end;
}
.flex-item-center {
border: solid 2px #4675AA;
font-family: Arial, sans-serif;
font-size: 1.6em;
line-height: 1px;
padding: 0 3px;
}
<div class="flex-center">
<div class="flex-item-center">
<p>Some text in box A</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Some text in box B...</p>
</div>
</div>
I hope this helps you.
Is this what you are looking for? http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/
body {
background-color: lightblue;
}
#main {
width: 100%;
height: 400px;
border: 1px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: flex-start;
/* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
.flex-item-center {
margin-left: 40%;
border-style: solid;
-webkit-align-self: center;
/* Safari 7.0+ */
align-self: center;
}
.flex-item-bottom {
border-style: solid;
align-self: flex-end;
}
Try:
#main-wrapper {
background: blue;
width: 100%;
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
}
.x-center {
display: flex;
justify-content: center;
}
.y-center {
flex: 1;
}
.x-right {
justify-content: flex-end;
}
.y-bottom {
align-self: flex-end;
}
.small-div {
padding: 10px;
}
<div id="main-wrapper">
<div class="x-center y-center small-div">Center center</div>
<div class="x-right y-bottom small-div">Bottom Right</div>
</div>
Notes:
The align-self won't work for IE10 or below.
Anybody know how to make the center div a bit more to the left without position relativing it? Thanks
In Bootstrap 4.x you can use the utility classes
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end h-100">
<div class="d-flex align-items-end">right bottom</div>
</div>
</div>
</div>
</div>
EDIT
Since I received a couple downvotes I believe a review is in order.
To me the above answer is still valid, however I understand it's not clear it requires some height.
How this height is achieved doesn't really matter. Either you set it fixed in CSS on a wrapper or for the code snippet's sake we set the document's height to make it responsive.
If the "center content" takes up the space in height, the "bottom content" can be positioned absolute, so it doesn't add height. All what's left is to make sure it covers the full width and positions from the bottom.
html, body { height: 100%; } /* can be anything that generates height */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end position-absolute w-100 fixed-bottom">
<div class="d-flex align-items-end">right bottom</div>
</div>
So functionality wise, there's no additional CSS required in Bootstrap.
Documentation justify content
Documentation position