Flexbox Article 1

by bejnar

HTML

<div class="flex-container">
    <div class="flex-item corner-top-left">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item corner-top-right">A</div>
</div>

<div class="flex-container">
    <div class="flex-item stem">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item stem">A</div>
</div>

<div class="flex-container">
    <div class="flex-item stem">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item stem">A</div>
</div>

<div class="flex-container">
    <div class="flex-item stem">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item">A</div>
    <div class="flex-item stem">A</div>
</div>

<div class="flex-container">
    <div class="flex-item stem">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item cut">A</div>
    <div class="flex-item stem">A</div>
</div>

SCSS

body,html {
    height:100%;
    padding:20px;
}

.flex-container {
    display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
    height:10%;
}

.flex-item {
    border:1px solid #000; 
    background: orange;
    margin: 0;
    -webkit-flex: 1 0 auto;
	flex: 1 0 auto;
}

.cut {
    background: white;
}

.stem {
    flex: 20%;
}

.corner-top-left {
    flex: 20%;
    border-radius: 90% 0 0 0;
}

.corner-top-right {
    flex: 20%;
    border-radius: 0 90% 0 0 ;
}

JavaScript

// see http://bennettfeely.com/flexplorer/