External link inside flex item


#21

I copied your code and then tried to change div {max-width:600px;} to say div {max-width:450px;} - the span falls under bottom left of the image. I guess this is what is called ‘line break’ - the part that doesn’t fit into container just automatically goes on the next line. What I don’t understand is why img element was given default inline and not block when it was introduced in HTML…:thinking:


#22

From post #11 ?

In this case it’s not a line break (but yeah it acts like one) . We instructed the absolute positioned span to go there with bottom:0;

You lost me there, I don’t know what “the part that doesn’t fit” is.

Unless you update your page, or post a test case here in the thread, it’s hard for me to see what your trying to explain.

Here is the code from post #11 (with some minor changes), you can change the.view div to max-width:450px; and the page will hold together.

view-page-2.html (1.6 KB)


#23

No post where you provided the link to Eric Meyer article and gave example of the page with image and span (sorry for the confusion)


#24

from post #13


#25

The code in that post was an example of why you don’t want the anchor left as display:inline;


#26

Hi Ray,

I changed the layout as per your suggestions above. I’ve updated the test link (please see post #1 in this thread). Can you take a look when you get a chance…

I can’t figure out this one: I added justify-content: center; to .footer ul to center the social icons. I also added margin-left: .25em; to .footer li { to give space between the icons, however icons, middle one in particular, still appear slightly shifted to the right when in desktop view. I also tried using new property column-gap on the container however it had no effect…

please see image attached


#27

To keep them centered you need to use margins on each side rather than left only.
margin: 0 .125em;

Or margins on each side of the center li only…

.footer li:nth-child(2) {
    margin: 0 .25em;
}

For Flexbox MDN shows column-gap as experimental, currently only working in Firefox 63.

It is supported in Grid and Multi-Column layouts.


#28

I think I messed up Paul’s sticker footer with my changes to the layout…


#29

Yes it looks like you were using the display:table version, you’ll need to go with a flexbox version now.

There is a link to Paul’s 2-column flexbox version in the display table demo.

But in it’s simplest form for a 1-Column layout it would go like this…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>One-Column Flexbox Sticky Footer</title>
<style>
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  max-width: 1000px;
  margin: 0 auto;
  outline: 1px solid grey;
}
header, footer {
  background:  #ccc;
  padding: 10px;
}
footer {margin-top: auto;}
</style>

</head>
<body>

<div class="wrap">
  <header>
    One-Column Flexbox Sticky Footer
  </header>
  <main class="main">
    <p>Lorem ipsum dolor sit amet consectetuer Aenean orci vitae odio Vivamus. Tincidunt.</p>
  </main>
  <footer>
    footer stuff
  </footer>
</div>

</body>
</html>


#30

just to clarify…margin auto on the footer here fills up all the available space in the direction of flex flow column…


#31

Or rather it pushes against that space. But yes, you’ve got the concept right.

Here’s some more explanation on auto margins with flexbox.

Using auto margins for main axis alignment


#32

Thanks for the link Ray

I came across this in flexbox spec too…

"Auto margins expand to absorb extra space in the corresponding dimension. They can be used for alignment, or to push adjacent flex items apart. "
I guess the key word here is corresponding dimension…which I guess means corresponding direction…


#33

So technically I read that to say that the extra space actually becomes the margin’s value.

Yes, depending on which axis your working with. If you were in flex-direction:row; then that extra space would be margin-left or margin-right auto.

You can also go ahead and give the extra space to the main content with flex:1; and get the same effect. Either way though, the browser has to process what that space is.

However, that would allow a background color/image to expand fully in the main content area if it was needed.

.wrap {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  max-width: 1000px;
  margin: 0 auto;
  outline: 1px solid grey;
}
.main {flex:1;}

header, footer {
  background:  #ccc;
  padding: 10px;
}

#34

I don’t have any more questions for the topics discussed in this thread. I am gonna move on and try build next page and see how it goes. thanks guys.