Flexbox header?

I’ve got what I think is a pretty simply flexbox layout: https://codepen.io/anon/pen/ayGvyK

All I’m wanting is for “heading” to sit above the four columns (the four columns should be evenly spaces and span 100% of the width) and be centered. How can I achieve that with flexbox?

Not sure if this is what you meant?

.wrap {
   display: flex;
   justify-content: space-between;
  flex-wrap:wrap;
}
.col {
  display: flex;
   flex 1: 0 20%;
  flex-direction:column;
}
.col-head{flex:1 0 100%}

Paul answered your question quite literally and is probably what you want.

But here is another “not fully flexbox” method. Why not use all flexbox? Because flex is CPU intensive and if your site or pages are “active” enough, can cause the site to drag or run slowly. So the rule that I follow is to use the least CPU intensive methods to achieve the desired result. Use flex where it excels and other (simpler) methods where they shine.

For comparison…

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/flexbox-header/273656
-->
    <style>
html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
/* this ".outer" container is convenient but not absolutely necessary */
.outer {
    width:90%;
    padding:1px 0;  /* prevent margin collapse of top and bottom text */
    margin:0 auto;
    outline:1px dashed black;
}
/* the h2 does not need a unique container */
h2 {
    font-size:1.5em;
    text-align:center;
    outline:1px dashed green;
}
/* the flex container */
.wrap {
    display:flex;
    justify-content:space-between;
    outline:1px dashed red;
}
/* the flex items */
.col {
    flex-direction:column;
    width:23%;
    background-color:pink;
}
    </style>
</head>
<body>

<div class="outer">
    <h2>Heading</h2>
    <div class="wrap">
        <div class="col">Col 1</div>
        <div class="col">Col 2</div>
        <div class="col">Col 3</div>
        <div class="col">Col 4</div>
    </div>
</div>

</body>
</html>
1 Like

Thanks, guys. Both of those solutions seem to work great and makes sense.

Can either of you explain like I’ve five what

flex: 1 0 100%;

does?

I’ve seen it written as flex: 0 0 <value> and as flex: 1 0 <value> and different variations. I’m just not sure I understand what the leading “1” does vs having a “0” there. I change it in my code but don’t see any difference.

The flex property is shorthand for three properties: flex-grow, flex-shrink and flex-basis.
flex-grow will allow items to stretch to fill any excess space.
flex-shrink will allow items to squeeze smaller when space gets too tight.
The value of both of these is relative, an item with flex-grow: 2 will take twice the available free space than an item with flex-grow: 1. An item with flex-grow: 0 will take no free space, so grow is effectively off.
The flex-basis property sets a desired size for the item, but with grow and shrink enabled, that size is not set in stone, but determines a size where the item is comfortable.

3 Likes

Thanks for that explanation!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.