set fixed spacing for flexbox list

后端未结

关注

 5  1054

i noticed that on my firefox the distance between the bottom of the website and the list for links(terms,about...) is really large, i cannot seem to figure out what to specify i

相关标签:

5条回答

被撕碎了的回忆

2021-01-25 06:42

As promised, a complete overhaul of your code. Essentially I simplified your HTML a bit and fully recreated the CSS to make the page fully responsive without the use of @media queries or any external framework.

introduced use of box-sizing: border-box for all elements
main structure uses flexbox layout
introduced banding attributes ([band]) for easy construction of 'Landing Page' layout
inserted responsive page T/L/B/R spacing
used linear equations (y=mx+b) to calculate sizes for responsiveness (mainly fontsizes and element spacing)
now only uses em and rem for sizes where applicably, removed all uses of px
etc... (completion of this list with external references is pending)

Examples of

hover manipulation
using predefined Unicode icon as alternative to iconify JS (prevents load delay)
used inline SVG as an alternative icon to serve Android

Tested both landscape and portrait layout

Works on latest Chrome, Edge, Firefox and IE11 (and IE10 simulated)
And Android 9+, Samsung Galaxy J4+, 360x740 (Chrome, Firefox and default browser)
With minimum fit 320x320, maximum fit 1920x1200

Update

Use of Unicode does not seem to work on Android (or with some workaround), added inline SVG as an alternative. Idea behind it: loading some JS which in turn loads a single icon seems a bit overkill (not to mention s l o w)... SVG works on Android!

The Snippet (on SO full-page view required)

<!-- 
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js">// this JS disabled</script>
 -->

/*****************************/
/* my preferred global rules */
/*****************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, *   { box-sizing: inherit }
/*
    Above CSS defines ALL elements to use 'border-box'

    Defining `box-sizing: border-box` will make calculation/manipulating element sizes
    much easier as (usually) you would want to know the width/height of an element 
    including its inner spacing ('padding') and border.

    => element width/height = content width/height + padding + border
    
    Default CSS is 'box-sizing: content-box'
    => element width/height = content width/height

    'margin' is never part of an element width/height, so use sparsely!
    
    Own the boxmodel knowledge (MDN): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model 
    w3schools 'CSS box-sizing Property': https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
*/
/*

    All math reference: https://www.mathsisfun.com/equation_of_line.html

*/
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */

/* Simple banding attribute for use in 'Landing Page' layout */
[band]            { display: flex; flex-flow: column wrap; }
[band*="cols"]    { flex-direction: row    } /* horizontally oriented container */
[band*="rows"]    { flex-direction: column } /* vertically oriented container   */

[band],[centered] { justify-content: center; align-content: center; align-items: center }

body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)

    Top/Bottom padding: p1(320,16) p2(1920, 72) => 0.035x + 4.8  => vary from 16 to  72px
    Left/Right padding: p3(320, 8) p4(1920,320) => 0.195x - 54.4 => vary from  8 to 320px

    'Band padding' is only active when 'page padding' is off (0)
*/
    padding: calc(3.5vh + 4.8px) calc(19.5vw - 54.4px);
}

/* prohibit user from selecting text (put in <body>), esp. convenient for 'click-happy' users... */
[no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
[do-select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: auto }
/* enable user to select text (put in specific elements) */

/* for debugging */
[outlines="1"] * { outline: 1px dashed }

/* YOUR CODE */
/*
    Favouring 'mobile' only requires @media queries when you need
    to override/modify CSS values for other (larger) devices. 

    - for the main design I used my Samsung J4+, 360x740
    - and as large device my desktop display, 1920x1200
    - smallest fit test 320x320 (Smartwatch? With a browser??? Okay...)
    - and width 480px
*/

/*************************************/
/* First: setup the main page layout */
/*************************************/
/*
    <body> contains a main 'page-wrapper'
    

    with three distinct zones below each other,
    (which I have designated to be a [band]):

    - header
    - content
    - footer

    [band] is a vertically oriented flexbox container
           which centers all its child elements.

    <body padded="0"> which means that page spacing is 
    done at [band="padded"] level.
*/

/******************************/
/* override some CSS defaults */
/******************************/
body   { margin: 0 } /* remove default <body> spacing */
a      { margin: 0; color: inherit; text-decoration: none }
button { display: block }

body  {
    height: 100vh; /* full viewport height */

    /* all elements inherit below style */

    font-size: 1rem; /* make it :root fontsize dependend */
    /* which, in turn, is viewport size dependend */
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    /* with fallbacks for slow/none loading fonts */
    font-weight: 500; /* the preference for 'Montserrat' */

    color: rgba(99,186,134,1);
    /* default is 'Black', but most text is (#63ba86 greenish) */
    /* converted to rgba so its transparency can be changed/manipulated */
} 

.page-wrapper { /* main container holding all page content */
    display: flex; /* it's not a [band], so define FBL */
    flex-direction: column; /* of 3 container rows */
    justify-content: space-between; /* pushes header/footer apart */
    
    height: 100%; /* full parent height (<body>) */
}

/* .page-wrapper row 1 */
header {
    padding: 0.25rem 0; /* instead of '[band="padded"]' */
    font-size: 1.125em;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* #e5e5e5 */
}
header .text, header .iconify {
    margin-right: auto
}
header .iconify {
    font-size: 0.9em; margin-left: .5rem;
}

/* Unicode font assignment, does not show on Android! */
[utf] { font-family: serif }

/* icons from Unicode Group 'Supplemental Arrows-C' (https://unicode.org/charts/nameslist/) */
.iconify[utf="1F804"]:before {
    content: '\1F804'; /* 1F804


          	          
            
           
            
                              
                
              
              
                
                  有刺的猬        
                
              
                            
                2021-01-25 06:42
              
            
            
                                                                       
It would be easier to create this entire page than to fix each and every css bugs !
Add this at the very top of your Css below body styling
footer {
  position: fixed;
  bottom: 0;
  margin-bottom: 2vh;
  width: 100%;
}

Well i couldnt perform the surgery but applied a little band aid on the injury ! this will stop the bleeding for a while until you walk again .
                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
          	          
            
           
            
                              
                
              
              
                
                  一生所求        
                
              
                            
                2021-01-25 06:43
              
            
            
                                                                       
Check out the MDN Post on these topics too.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
          	          
            
           
            
                              
                
              
              
                
                  长发绾君心        
                
              
                            
                2021-01-25 06:53
              
            
            
                                                                       

i noticed that on my firefox the distance between the bottom of the
website and the list for links(terms,about...) is really large

This is the nature of the webpage you have created because the content only goes as far as that height. In order for your footer element to stay at the bottom: I recommend utilizing Flexbox & setting margin-top: auto to your footer. In order for the margin to kick in, simply give your container (in this case, .body) the flex display property & a minimum height of 100vh (so that it takes at least 100% of the viewport in terms of height) and assign column as it's flex-direction. This way, the footer can always stay at the bottom on your given layout.
body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

footer.cl {
    margin-top: auto;
}

                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
          	          
            
           
            
                              
                
              
              
                
                  忘了有多久        
                
              
                            
                2021-01-25 06:57
              
            
            
                                                                       
I have made a few changes in your code. hope this will help you.
HTML:
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Home - Brand</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
  <div class="container">
    <header>
      <span class="iconify" data-inline="false" data-icon="eva:arrow-back-fill"
        style="color: #63ba86; font-size: 24px; padding-top: 10px;">
      </span>
      <h1>Forgot password</h1>
      <div class="dummy"></div>
    </header>
    <div class="content">
      <h1 class="big">Change your password</h1>
      <h1 class="cer">Confirm your email address</h1>
      <form action="#" class="formstyle" style="padding-top:10px;padding-left: 10px">
        <input type=" text " placeholder="Enter your email address" required>
        <div class="btnn"><button type="submit" class="conf">Confirm</button></div>
      </form>
    </div>
    <footer class="cl">
      <div class="liner"></div>
      <ul>
        <li>
          <a href="# " class="link ">Terms</a>
          <a href="# ">Privacy</a>
          <a href="# ">About</a>
        </li>
      </ul>
    </footer>
  </div>
</body>

<script src="https://code.iconify.design/1/1.0.6/iconify.min.js "></script>

</html>

CSS:
body {
  background-color: #FFFFFF;
  margin: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #E5E5E5;
}

h1 {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  color: #63BA86;
}

h1.big {
  font-style: normal;
  font-weight: 500;
  color: #63BA86;
  text-align: center;
}

h1.cer {
  font-style: normal;
  font-weight: 300;
  color: #356B51;
  text-align: center;
}

h2 {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  color: #63BA86;
}

form {
  margin: auto;
  text-align: center;
}

input {
  width: 300px;
  height: 35px;
  border: 0.5px solid #63BA86;
  border-radius: 5px;
  font-family: Montserrat;
  padding-left: 5px;
}
input:required {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}

button {
  margin-top: 10px;
  padding: 10px 35px;
  border: 0.5px solid #63BA86;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btnn {
  text-align: center;
}

button.conf {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #67E298;
}

ul {
  display: flex;
  justify-content: flex-end;
  text-decoration: none;
  list-style: none;
}


li {
  text-align: left;
  margin: 10px;
}

link {
  margin: 10px;
  font-size: large;
}

a {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: #63BA86;
  text-decoration: none;
  margin: 1rem;
}

@media screen and (max-width: 30em) {
  h1.big {
    font-size: 20px;
    line-height: 29px;
  }
  h1 {
    font-size: 18px;
    line-height: 22px;
  }
  h1.cer {
    font-size: 12px;
    line-height: 10px;
  }
  h2 {
    font-size: 18px;
    line-height: 29px;
  }
  form {
    width: 90%;
  }
  button.conf {
    font-size: 12px;
    line-height: 17px;
  }
  footer.cl {
    border-top: 1px solid #E5E5E5;
  }
}

@media screen and (min-width: 30em) {
  h1 {
    font-size: 18px;
    line-height: 22px;
  }
  h1.big {
    font-size: 40px;
    line-height: 29px;
  }
  h1.cer {
    font-size: 12px;
    line-height: 10px;
  }
  form {
    width: 50%;
  }
  button.conf {
    font-size: 12px;
    line-height: 17px;
  }
  .liner {
    width: auto;
    height: 0px;
    border: 1px solid #E5E5E5;
    margin-top: 40px;
  }
}

JSFiddle:
https://jsfiddle.net/Danielprabhakaran_N/7t8qk69b/3/
                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...