How set distances in a specific layout using flexbox?
0
I am trying to accomplish the following:
If the container is wider than the image below than the map pin icon should right align, while the close (x) icon should remain next to the address. Correspondingly, the text should be on a single line if it can fit.
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
What am I missing?
I have the following layout & css:
.address-container {
display: flex;
height: 38px;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
margin-left: 15px;
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
margin-right: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: #F5F5F5;
font-size: 15px;
}
.address-close {
margin-left: 5px;
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
.address-close > img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>html css flexbox
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
add a comment |
0
I am trying to accomplish the following:
If the container is wider than the image below than the map pin icon should right align, while the close (x) icon should remain next to the address. Correspondingly, the text should be on a single line if it can fit.
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
What am I missing?
I have the following layout & css:
.address-container {
display: flex;
height: 38px;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
margin-left: 15px;
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
margin-right: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: #F5F5F5;
font-size: 15px;
}
.address-close {
margin-left: 5px;
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
.address-close > img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>html css flexbox
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
add a comment |
0
0
0
I am trying to accomplish the following:
If the container is wider than the image below than the map pin icon should right align, while the close (x) icon should remain next to the address. Correspondingly, the text should be on a single line if it can fit.
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
What am I missing?
I have the following layout & css:
.address-container {
display: flex;
height: 38px;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
margin-left: 15px;
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
margin-right: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: #F5F5F5;
font-size: 15px;
}
.address-close {
margin-left: 5px;
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
.address-close > img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>html css flexbox
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
I am trying to accomplish the following:
If the container is wider than the image below than the map pin icon should right align, while the close (x) icon should remain next to the address. Correspondingly, the text should be on a single line if it can fit.
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
What am I missing?
I have the following layout & css:
.address-container {
display: flex;
height: 38px;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
margin-left: 15px;
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
margin-right: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: #F5F5F5;
font-size: 15px;
}
.address-close {
margin-left: 5px;
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
.address-close > img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>.address-container {
display: flex;
height: 38px;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
margin-left: 15px;
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
margin-right: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: #F5F5F5;
font-size: 15px;
}
.address-close {
margin-left: 5px;
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
.address-close > img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>.address-container {
display: flex;
height: 38px;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
margin-left: 15px;
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
margin-right: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: #F5F5F5;
font-size: 15px;
}
.address-close {
margin-left: 5px;
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
.address-close > img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>html css flexbox
html css flexbox
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
asked Nov 16 '18 at 1:20
AngryHackerAngryHacker
27.9k76242452
27.9k76242452
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
It's a little hard to understand your question, but I recreated some stuff in a codepen that I think does what you need:
https://codepen.io/dustinkeeton/pen/yQXMyo
the short of it is that I wrapped the address-text and address-close elements in their own address-card div since it seemed like they were logically grouped together. Giving that a display: flex as well helps the spacing within the element so the text can stretch to 1 line or wrap. Then I used justify-contents: space-between on the parent div to push the address container away from the pin.
* {
box-sizing: border-box;
}
.container {
width: 25vw; /* just test value - lower this value to see collapsing happening */
display: flex;
justify-content: space-between; /* this is your spacing rule */
}
.address-card {
display: flex; /* helps items be inline and take up space correctly */
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: 15px;
}
.pin {
border: 1px solid #F5F5F5;
padding: 3px;
height: 30px;
width: 30px;
}<div class="container">
<div class="address-card">
<div class="text">1533 Sylvia Dr, Bristol, Maine</div>
<img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
</div>
<img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>answered Nov 16 '18 at 1:44
DustinDustin
16615
I can't wrap address-text and address-close elements together because in a different breakpoint (e.g. large desktop size), the elements are all reversed. That's why I chose flexbox so that I could rearrange them with a media query using theorderattribute.
– AngryHacker
Nov 16 '18 at 1:54
Ah, I see. That's key information. So in other breakpoints the close icon is before the text? Or is it just the pin icon that moves from the right to the left?
– Dustin
Nov 19 '18 at 19:08
add a comment |
0
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
.address-close {
margin-left: 5px; <--- remove this
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
Once you remove the left margin on the .address-close element, the space between the first and second flexbox items is gone.
jsFiddle demo
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
True, but the .address-pin-icon element doesn't align to the right as the container is increased.
– AngryHacker
Nov 16 '18 at 19:16
add a comment |
-1
The space appears to be coming from the margins you have applied to address-clos etce. I'd remove that and add some padding-right to address-text.
.address-container {
display: flex;
height: 38px;
width: 35vw;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
/* margin-left: 15px; */
/* removed */
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
//margin-right: 0px;
padding-right: 15px;
/* added this */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: lightgrey;
font-size: 15px;
}
.address-close {
/* margin-left: 5px; */
/* removed */
/* margin-right: 15px; */
/* removed */
order: 2;
background-color: lightgrey;
padding-right: 15px;
/* added this */
}
.address-close>img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330134%2fhow-set-distances-in-a-specific-layout-using-flexbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It's a little hard to understand your question, but I recreated some stuff in a codepen that I think does what you need:
https://codepen.io/dustinkeeton/pen/yQXMyo
the short of it is that I wrapped the address-text and address-close elements in their own address-card div since it seemed like they were logically grouped together. Giving that a display: flex as well helps the spacing within the element so the text can stretch to 1 line or wrap. Then I used justify-contents: space-between on the parent div to push the address container away from the pin.
* {
box-sizing: border-box;
}
.container {
width: 25vw; /* just test value - lower this value to see collapsing happening */
display: flex;
justify-content: space-between; /* this is your spacing rule */
}
.address-card {
display: flex; /* helps items be inline and take up space correctly */
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: 15px;
}
.pin {
border: 1px solid #F5F5F5;
padding: 3px;
height: 30px;
width: 30px;
}<div class="container">
<div class="address-card">
<div class="text">1533 Sylvia Dr, Bristol, Maine</div>
<img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
</div>
<img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>answered Nov 16 '18 at 1:44
DustinDustin
16615
I can't wrap address-text and address-close elements together because in a different breakpoint (e.g. large desktop size), the elements are all reversed. That's why I chose flexbox so that I could rearrange them with a media query using theorderattribute.
– AngryHacker
Nov 16 '18 at 1:54
Ah, I see. That's key information. So in other breakpoints the close icon is before the text? Or is it just the pin icon that moves from the right to the left?
– Dustin
Nov 19 '18 at 19:08
add a comment |
0
It's a little hard to understand your question, but I recreated some stuff in a codepen that I think does what you need:
https://codepen.io/dustinkeeton/pen/yQXMyo
the short of it is that I wrapped the address-text and address-close elements in their own address-card div since it seemed like they were logically grouped together. Giving that a display: flex as well helps the spacing within the element so the text can stretch to 1 line or wrap. Then I used justify-contents: space-between on the parent div to push the address container away from the pin.
* {
box-sizing: border-box;
}
.container {
width: 25vw; /* just test value - lower this value to see collapsing happening */
display: flex;
justify-content: space-between; /* this is your spacing rule */
}
.address-card {
display: flex; /* helps items be inline and take up space correctly */
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: 15px;
}
.pin {
border: 1px solid #F5F5F5;
padding: 3px;
height: 30px;
width: 30px;
}<div class="container">
<div class="address-card">
<div class="text">1533 Sylvia Dr, Bristol, Maine</div>
<img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
</div>
<img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>answered Nov 16 '18 at 1:44
DustinDustin
16615
I can't wrap address-text and address-close elements together because in a different breakpoint (e.g. large desktop size), the elements are all reversed. That's why I chose flexbox so that I could rearrange them with a media query using theorderattribute.
– AngryHacker
Nov 16 '18 at 1:54
Ah, I see. That's key information. So in other breakpoints the close icon is before the text? Or is it just the pin icon that moves from the right to the left?
– Dustin
Nov 19 '18 at 19:08
add a comment |
0
0
0
It's a little hard to understand your question, but I recreated some stuff in a codepen that I think does what you need:
https://codepen.io/dustinkeeton/pen/yQXMyo
the short of it is that I wrapped the address-text and address-close elements in their own address-card div since it seemed like they were logically grouped together. Giving that a display: flex as well helps the spacing within the element so the text can stretch to 1 line or wrap. Then I used justify-contents: space-between on the parent div to push the address container away from the pin.
* {
box-sizing: border-box;
}
.container {
width: 25vw; /* just test value - lower this value to see collapsing happening */
display: flex;
justify-content: space-between; /* this is your spacing rule */
}
.address-card {
display: flex; /* helps items be inline and take up space correctly */
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: 15px;
}
.pin {
border: 1px solid #F5F5F5;
padding: 3px;
height: 30px;
width: 30px;
}<div class="container">
<div class="address-card">
<div class="text">1533 Sylvia Dr, Bristol, Maine</div>
<img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
</div>
<img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>answered Nov 16 '18 at 1:44
DustinDustin
16615
It's a little hard to understand your question, but I recreated some stuff in a codepen that I think does what you need:
https://codepen.io/dustinkeeton/pen/yQXMyo
the short of it is that I wrapped the address-text and address-close elements in their own address-card div since it seemed like they were logically grouped together. Giving that a display: flex as well helps the spacing within the element so the text can stretch to 1 line or wrap. Then I used justify-contents: space-between on the parent div to push the address container away from the pin.
* {
box-sizing: border-box;
}
.container {
width: 25vw; /* just test value - lower this value to see collapsing happening */
display: flex;
justify-content: space-between; /* this is your spacing rule */
}
.address-card {
display: flex; /* helps items be inline and take up space correctly */
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: 15px;
}
.pin {
border: 1px solid #F5F5F5;
padding: 3px;
height: 30px;
width: 30px;
}<div class="container">
<div class="address-card">
<div class="text">1533 Sylvia Dr, Bristol, Maine</div>
<img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
</div>
<img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>* {
box-sizing: border-box;
}
.container {
width: 25vw; /* just test value - lower this value to see collapsing happening */
display: flex;
justify-content: space-between; /* this is your spacing rule */
}
.address-card {
display: flex; /* helps items be inline and take up space correctly */
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: 15px;
}
.pin {
border: 1px solid #F5F5F5;
padding: 3px;
height: 30px;
width: 30px;
}<div class="container">
<div class="address-card">
<div class="text">1533 Sylvia Dr, Bristol, Maine</div>
<img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
</div>
<img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>* {
box-sizing: border-box;
}
.container {
width: 25vw; /* just test value - lower this value to see collapsing happening */
display: flex;
justify-content: space-between; /* this is your spacing rule */
}
.address-card {
display: flex; /* helps items be inline and take up space correctly */
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: 15px;
}
.pin {
border: 1px solid #F5F5F5;
padding: 3px;
height: 30px;
width: 30px;
}<div class="container">
<div class="address-card">
<div class="text">1533 Sylvia Dr, Bristol, Maine</div>
<img class="close" src="https://rgelb.github.io/public/misc/close.svg" height="18" />
</div>
<img class="pin" src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" />
</div>answered Nov 16 '18 at 1:44
DustinDustin
16615
answered Nov 16 '18 at 1:44
DustinDustin
16615
answered Nov 16 '18 at 1:44
DustinDustin
16615
answered Nov 16 '18 at 1:44
DustinDustin
16615
16615
I can't wrap address-text and address-close elements together because in a different breakpoint (e.g. large desktop size), the elements are all reversed. That's why I chose flexbox so that I could rearrange them with a media query using theorderattribute.
– AngryHacker
Nov 16 '18 at 1:54
Ah, I see. That's key information. So in other breakpoints the close icon is before the text? Or is it just the pin icon that moves from the right to the left?
– Dustin
Nov 19 '18 at 19:08
add a comment |
I can't wrap address-text and address-close elements together because in a different breakpoint (e.g. large desktop size), the elements are all reversed. That's why I chose flexbox so that I could rearrange them with a media query using theorderattribute.
– AngryHacker
Nov 16 '18 at 1:54
Ah, I see. That's key information. So in other breakpoints the close icon is before the text? Or is it just the pin icon that moves from the right to the left?
– Dustin
Nov 19 '18 at 19:08
I can't wrap address-text and address-close elements together because in a different breakpoint (e.g. large desktop size), the elements are all reversed. That's why I chose flexbox so that I could rearrange them with a media query using the
order attribute.– AngryHacker
Nov 16 '18 at 1:54
I can't wrap address-text and address-close elements together because in a different breakpoint (e.g. large desktop size), the elements are all reversed. That's why I chose flexbox so that I could rearrange them with a media query using the
order attribute.– AngryHacker
Nov 16 '18 at 1:54
Ah, I see. That's key information. So in other breakpoints the close icon is before the text? Or is it just the pin icon that moves from the right to the left?
– Dustin
Nov 19 '18 at 19:08
Ah, I see. That's key information. So in other breakpoints the close icon is before the text? Or is it just the pin icon that moves from the right to the left?
– Dustin
Nov 19 '18 at 19:08
add a comment |
0
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
.address-close {
margin-left: 5px; <--- remove this
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
Once you remove the left margin on the .address-close element, the space between the first and second flexbox items is gone.
jsFiddle demo
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
True, but the .address-pin-icon element doesn't align to the right as the container is increased.
– AngryHacker
Nov 16 '18 at 19:16
add a comment |
0
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
.address-close {
margin-left: 5px; <--- remove this
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
Once you remove the left margin on the .address-close element, the space between the first and second flexbox items is gone.
jsFiddle demo
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
True, but the .address-pin-icon element doesn't align to the right as the container is increased.
– AngryHacker
Nov 16 '18 at 19:16
add a comment |
0
0
0
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
.address-close {
margin-left: 5px; <--- remove this
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
Once you remove the left margin on the .address-close element, the space between the first and second flexbox items is gone.
jsFiddle demo
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
I need to have a gray background that encompasses 1st and 2nd flexbox items. I am getting something close but not quite right. There is space between those items.
.address-close {
margin-left: 5px; <--- remove this
margin-right: 15px;
order: 2;
background-color: #F5F5F5;
}
Once you remove the left margin on the .address-close element, the space between the first and second flexbox items is gone.
jsFiddle demo
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
answered Nov 16 '18 at 2:18
Michael_BMichael_B
156k50254363
156k50254363
True, but the .address-pin-icon element doesn't align to the right as the container is increased.
– AngryHacker
Nov 16 '18 at 19:16
add a comment |
True, but the .address-pin-icon element doesn't align to the right as the container is increased.
– AngryHacker
Nov 16 '18 at 19:16
True, but the .address-pin-icon element doesn't align to the right as the container is increased.
– AngryHacker
Nov 16 '18 at 19:16
True, but the .address-pin-icon element doesn't align to the right as the container is increased.
– AngryHacker
Nov 16 '18 at 19:16
add a comment |
-1
The space appears to be coming from the margins you have applied to address-clos etce. I'd remove that and add some padding-right to address-text.
.address-container {
display: flex;
height: 38px;
width: 35vw;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
/* margin-left: 15px; */
/* removed */
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
//margin-right: 0px;
padding-right: 15px;
/* added this */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: lightgrey;
font-size: 15px;
}
.address-close {
/* margin-left: 5px; */
/* removed */
/* margin-right: 15px; */
/* removed */
order: 2;
background-color: lightgrey;
padding-right: 15px;
/* added this */
}
.address-close>img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
add a comment |
-1
The space appears to be coming from the margins you have applied to address-clos etce. I'd remove that and add some padding-right to address-text.
.address-container {
display: flex;
height: 38px;
width: 35vw;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
/* margin-left: 15px; */
/* removed */
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
//margin-right: 0px;
padding-right: 15px;
/* added this */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: lightgrey;
font-size: 15px;
}
.address-close {
/* margin-left: 5px; */
/* removed */
/* margin-right: 15px; */
/* removed */
order: 2;
background-color: lightgrey;
padding-right: 15px;
/* added this */
}
.address-close>img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
add a comment |
-1
-1
-1
The space appears to be coming from the margins you have applied to address-clos etce. I'd remove that and add some padding-right to address-text.
.address-container {
display: flex;
height: 38px;
width: 35vw;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
/* margin-left: 15px; */
/* removed */
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
//margin-right: 0px;
padding-right: 15px;
/* added this */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: lightgrey;
font-size: 15px;
}
.address-close {
/* margin-left: 5px; */
/* removed */
/* margin-right: 15px; */
/* removed */
order: 2;
background-color: lightgrey;
padding-right: 15px;
/* added this */
}
.address-close>img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
The space appears to be coming from the margins you have applied to address-clos etce. I'd remove that and add some padding-right to address-text.
.address-container {
display: flex;
height: 38px;
width: 35vw;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
/* margin-left: 15px; */
/* removed */
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
//margin-right: 0px;
padding-right: 15px;
/* added this */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: lightgrey;
font-size: 15px;
}
.address-close {
/* margin-left: 5px; */
/* removed */
/* margin-right: 15px; */
/* removed */
order: 2;
background-color: lightgrey;
padding-right: 15px;
/* added this */
}
.address-close>img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>.address-container {
display: flex;
height: 38px;
width: 35vw;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
/* margin-left: 15px; */
/* removed */
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
//margin-right: 0px;
padding-right: 15px;
/* added this */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: lightgrey;
font-size: 15px;
}
.address-close {
/* margin-left: 5px; */
/* removed */
/* margin-right: 15px; */
/* removed */
order: 2;
background-color: lightgrey;
padding-right: 15px;
/* added this */
}
.address-close>img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>.address-container {
display: flex;
height: 38px;
width: 35vw;
align-items: stretch;
border-radius: 25px;
margin-bottom: 15px;
}
.address-pin-icon {
order: 3;
/* margin-left: 15px; */
/* removed */
border: 1px solid #F5F5F5;
padding: 5px;
}
.address-text {
order: 1;
margin-left: 5px;
//margin-right: 0px;
padding-right: 15px;
/* added this */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
background-color: lightgrey;
font-size: 15px;
}
.address-close {
/* margin-left: 5px; */
/* removed */
/* margin-right: 15px; */
/* removed */
order: 2;
background-color: lightgrey;
padding-right: 15px;
/* added this */
}
.address-close>img:hover {
background-color: dimgrey;
cursor: pointer;
}<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: white">
<div class="address-container">
<span class="address-pin-icon"><img src="https://rgelb.github.io/public/misc/map-pin.svg" height="18" /></span>
<span class="address-text">1533 Sylvia Dr, Bristol, Maine</span>
<span class="address-close"><img src="https://rgelb.github.io/public/misc/close.svg" height="18" /></span>
</div>
</div>
</div>
</div>answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
answered Nov 16 '18 at 11:41
Paulie_DPaulie_D
75.5k96790
75.5k96790
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330134%2fhow-set-distances-in-a-specific-layout-using-flexbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
