html - How to size flex-items without percentages? -
i trying create flexbox-based grid, content being 2/3 width , side bar remaining 1/3.
i have used percentages width in each col, unfortunately giving me errors in navigation , header.
why this? , how can make without using percentages, avoid errors?
@import url(https://fonts.googleapis.com/css?family=open+sans:400,300,600,700); *, *:before, *:after { box-sizing: border-box; } html body { margin: 0; padding: 0; font-family: 'open sans', sans-serif; } h1, h2, h3, h4, h5, p, a, li, ul { margin: 0; padding: 0; } /* centres content of website in width of 950px */ .container { width: 80%; margin: 0 auto; } /* header styling */ header { background: #66b3ff; /* padding: 10px; */ } /* logo */ #logo h1 { font-weight: 300; margin-top: 30px; } #logo h1 span { font-weight: 600; } /* end of logo */ /* nav */ nav ul { margin: 0; padding: 0; display: flex; margin-top: 50px; } li { flex: 1; list-style: none; } { text-decoration: none; } /* end of header styling */ /* columns */ .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { margin: 0 5px 0 5px; } .row { display: flex; flex-direction: row; flex-wrap: nowrap; } .col1 { width: 8%; } .col2 { width: 16%; } .col3 { width: 25%; } .col4 { width: 33%; } .col5 { width: 41%; } .col6 { width: 50%; } .col7 { width: 58%; } .col8 { width: 66%; } .col9 { width: 75%; } .col10 { width: 83%; } .col11 { width: 91%; } .col12 { width: 100%; }<header> <div class="container"> <div class="row"> <!-- row --> <!-- header --> <div id="logo" class="col col6"> <h1>bespoke<span>design</span>agency</h1> </div> <nav class="col col6"> <ul> <!-- navigation --> <li><a href="">home</a> </li> <li><a href="">about</a> </li> <li><a href="">gallery</a> </li> <li><a href="">contact</a> </li> </ul> </nav> <!-- end of navigation --> </div> </div> <!-- end of container --> </header> <!-- end of header --> <!-- end of row --> <div class="container maincontentcontainer"> <!-- website content --> <div class="row"> <!-- row --> <!-- main content --> <div class="col col8" id="maincontent"> <h1>main website content here</h1> <p>authentic truffaut put bird on tacos crucifix. kale chips craft beer austin, organic small batch salvia squid. readymade health goth put bird on it, yr semiotics shabby chic williamsburg selfies man braid godard. diy blog lomo selvage. pabst echo park tacos, kinfolk chicharrones thundercats farm-to-table offal twee keffiyeh affogato irony helvetica banjo. bicycle rights xoxo irony mumblecore tofu, keffiyeh kitsch retro plaid seitan street art. chartreuse ennui helvetica 90's haven't heard of them godard, diy keffiyeh listicle 3 wolf moon mustache.</p> </div> <!-- end of main content --> <!-- sidebar content --> <div id="sidebar" class="col col4"> <h1>side bar here</h1> </div> <!-- end of sidebar --> </div> <!-- end of row --> <div class="row"> <footer class="col col12"> <h1>footer content</h1> </footer> </div> </div>
consider using flex-grow property sizing flex items. property tells flex items amount of free space in container should absorb.
here examples of how flex-grow distributes space in row:
.container:nth-child(1) > .box { flex-grow: 1; background-color: lightgreen; } .container:nth-child(1) > .box:last-child { background-color: lightpink; } .container:nth-child(2) > .box:nth-child(1) { flex-grow: 3; background-color: aqua; } .container:nth-child(2) > .box:nth-child(2) { flex-grow: 7; background-color: orange; } .container:nth-child(2) > .box:nth-child(3) { flex-grow: 1; background-color: orangered;} .container:nth-child(3) > .box:nth-child(1) { flex-grow: 10; background-color: yellow; } .container:nth-child(3) > .box:nth-child(2) { flex-grow: 5; background-color: lightgreen; } .container:nth-child(3) > .box:nth-child(3) { flex-grow: 1; background-color: tan; } .container:nth-child(4) > .box:nth-child(1) { flex-grow: 5; bacground-color: pink; } .container:nth-child(4) > .box:nth-child(2) { flex-grow: 10; background-color: aqua; } .container:nth-child(4) > .box:nth-child(3) { flex-grow: 25; background-color: tan; } .container:nth-child(4) > .box:nth-child(4) { flex-grow: 50; background-color: tomato; } .container:nth-child(4) > .box:nth-child(5) { flex-grow: 99; background-color: yellow; } body { display: flex; flex-direction: column; align-items: center; } .container { display: flex; width: 95%; padding: 5px; border: 1px solid #ccc; background-color: lightyellow; } .box { height: 50px; background-color: lightgreen; border: 1px solid #aaa; display: flex; justify-content: center; align-items: center; }<div class="container"> <div class="box"><span>flex-grow: 1</span></div> <div class="box"><span>flex-grow: 1</span></div> </div> <div class="container"> <div class="box"><span>flex-grow: 3</span></div> <div class="box"><span>flex-grow: 7</span></div> <div class="box"><span>flex-grow: 1</span></div> </div> <div class="container"> <div class="box"><span>flex-grow: 10</span></div> <div class="box"><span>flex-grow: 5</span></div> <div class="box"><span>flex-grow: 1</span></div> </div> <div class="container"> <div class="box"><span>flex-grow: 5</span></div> <div class="box"><span>flex-grow: 10</span></div> <div class="box"><span>flex-grow: 25</span></div> <div class="box"><span>flex-grow: 50</span></div> <div class="box"><span>flex-grow: 99</span></div> </div>jsfiddle demo
note flexbox spec recommends using flex-grow part of flex shorthand property.
authors encouraged control flexibility using
flexshorthand rather longhand properties directly, shorthand correctly resets unspecified components accommodate common uses.
for detailed description of how flex-grow works, see post:
when working flex property refer spec summary of common values.
Comments
Post a Comment