flexbox

cards.css

/* Put behind .flexbox for Feature detection with Modernizr */
.flex-card-list {
	display:flex;
	flex-wrap:wrap;

}

.flex-card-listitem {
	display:flex;
}

@media all and (min-width:40em) {
	/* Float layout */
	.flex-card-list li {
		width:50%;
	}
}

/* Code to adjust the layout to 3 cards per row */
/*@media all and (min-width:40em) and (max-width:60em) {*/

	/* Clears the row for 2 item per row layout */
/*	.no-flexbox .flex-card-list li:nth-child(2n+1) {*/
/*		clear:both;*/
/*	}*/
/*}*/

@media all and (min-width:60em) {
  .flex-card-list li {
    width:33.33%;
  }
  /* Float specific: Clear after every third item */
	/*.no-flexbox .d-flex-card-list li:nth-child(3n+1) {*/
	/*	clear:both;*/
	/*}*/
}
	
.flex-card {
	display:flex;
	flex-direction:column;

}

.flex-card-content {
	display:flex;
	flex:1 0 auto; 
	flex-direction:column;

}

.flex-card-content p {
	flex:1 0 auto; 
}

cards.html

<!-- card list -->
<ul class="flex-card-list">
	<!-- card list item -->
	<li class="flex-card-listitem">
		<!-- card module -->
		<div class="flex-card">
			<!-- content container -->
			<div class="flex-card-content">
				<h3 class="flex-card-heading">First</h3>
				<p>I'm a card and I'm first.</p>
				<a href="#" class="flex-card-button">Button</a>
			</div>
		</div>
	</li>
	<!-- card list item -->
	<li class="flex-card-listitem">
		<!-- card module -->
		<div class="flex-card">
			<!-- content container -->
			<div class="flex-card-content">
				<h3 class="flex-card-heading">Second</h3>
				<p>I'm a card and I'm second.</p>
				<a href="#" class="flex-card-button">Button</a>
			</div>
		</div>
	</li>
  <!-- card list item -->
	<li class="flex-card-listitem">
		<!-- card module -->
		<div class="flex-card">
			<!-- content container -->
			<div class="flex-card-content">
				<h3 class="flex-card-heading">Third</h3>
				<p>I'm a card and I'm Third.</p>
				<a href="#" class="flex-card-button">Button</a>
			</div>
		</div>
	</li>
</ul>

flexbox.md

Flexbox

features

• Equal Height Columns
• Vertical centering
• Spacing at start/end/between/around
• Ordering
• Split up list over multiple columns
• Column wrapping

syntax

flex : flex-grow flex-shrink flex-basis|auto|initial|inherit;

flex-grow : A number specifying how much the item will grow relative to the rest of the flexible items

flex-shrink : A number specifying how much the item will shrink relative to the rest of the flexible items

flex-basis : The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit

vs float

• everything with different height
• have to set min or fix height
• button anchor needs absolute positioning and padding
• change screen width and adjust heights again

use cases

• responsive cards
• vertical layout

support

• not supported: IE8 IE9 OperaMini
• partial support with prefix: IE10 Android4.1 Android4.2