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>
Related
So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?
.firstDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
}
.secondDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
margin-left: 10px;
}
.mainDiv {
display:flex;
flex-direction: row;
}
<div class="mainDiv">
<div class="firstDiv">
First Div
</div>
<div class="secondDiv">
Second Div
</div>
</div>
Use display inline block
.content {
width: 100px;
height: 100px;
display: inline-block;
background-color: black;
}
<div class="content">Content</div>
<div class="content">Content</div>
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 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
}
I wrote a simple code to have two boxes center aligned with different dimensions
and now I would like to add a third one based on the dimensions of the second one (grey) and to start outside of the second one.
The second one (grey) is the core and the third one that I want to be the coil around the core but with it's own dimensions.
That's why I want to be based on the dimensions of second.
Please could you help me to make it?
Thank you very much in advance!
Kind Regards,
George
Here is the code:
<html>
<head>
<style>
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius:20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius:5px
}
</style>
</head>
<div id="container">
<div class="box1">
<div class="box2">
<div></div>
</div>
</div>
</div><!-- end #container -->
</html>
So considering the grey as the core and the red border around it as the coil. Is this how you wanted it to be done?
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius: 20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius: 5px;
position: relative;
}
.box2:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid red;
border-radius: 5px;
}
<div id="container">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
<!-- end #container -->
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
When I use flex-flow: column wrap, the parent element's width is not stretched.
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
position: relative;
display: inline-block;
/* top:10px; */
/* left: 10px; */
padding: 20px;
}
.in{
display: flex;
align-items: center;
flex-flow: column wrap;
max-height: 300px;
align-content: flex-start;
justify-content: space-between;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item:last-child{
margin-left: 15px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
https://jsfiddle.net/p4oLk7dz/5/
So what should I do?
You are trying to have a flex container inside the oder one, the first one needs the display flex to get the content of the element below
I would also make some small changes but it really depends on what you are trying to achive.
If this isnt what you were looking for, please comment so i can try to improve it.
Hope this works :)
.box{
background: #f03;
position: relative;
display: flex;
max-width: 220px;
padding: 20px;
}
.in{
display: flex;
flex-wrap: wrap;
max-width: 220px;
}
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
position: relative;
display: flex;
max-width: 220px;
padding: 20px;
}
.in{
display: flex;
flex-wrap: wrap;
max-width: 220px;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item-2{
order: 3;
}
.item-3{
margin-left: 20px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
</div>
</body>
<!-- 第三个并没有把父元素宽度撑开 -->
Remove the display properties from this class
.box{
background: #f03;
display: inline-block;
display:relative;
/* top:10px; */
/* left: 10px; */
padding: 20px;
}
and everything works !!!
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
padding: 20px;
}
.in{
display: flex;
align-items: center;
flex-flow: column wrap;
max-height: 300px;
align-content: flex-start;
justify-content: space-between;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item:last-child{
margin-left: 15px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
you can check the result here https://jsfiddle.net/p4oLk7dz/30/