set fixed spacing for flexbox list

后端未结

关注

 5  1093

迷失自我 2021-01-25 06:38

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)

/*****************************/
/* 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 ), 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 */
/*************************************/
/*
     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.

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

/******************************/
/* override some CSS defaults */
/******************************/
body   { margin: 0 } /* remove default  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 () */
}

/* .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