Footer Widgets

footer.php

<?php
// Check if there are footer widgets.
if ( is_active_sidebar( 'footer-1' ) or is_active_sidebar( 'footer-2' ) or is_active_sidebar( 'footer-3' ) or is_active_sidebar( 'footer-4' ) ) : ?>

	<div id="footer-widgets-wrap" class="footer-widgets-wrap">

		<div id="footer-widgets" class="footer-widgets"  role="complementary">

			<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>

				<div class="footer-widget-column widget-area">
					<?php dynamic_sidebar( 'footer-1' ); ?>
				</div>

			<?php endif; ?>

			<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>

				<div class="footer-widget-column widget-area">
					<?php dynamic_sidebar( 'footer-2' ); ?>
				</div>

			<?php endif; ?>

			<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>

				<div class="footer-widget-column widget-area">
					<?php dynamic_sidebar( 'footer-3' ); ?>
				</div>

			<?php endif; ?>

			<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>

				<div class="footer-widget-column widget-area">
					<?php dynamic_sidebar( 'footer-4' ); ?>
				</div>

			<?php endif; ?>

		</div>

	</div>

<?php endif; ?>

functions.php

<?php
/**
 * Register all Footer Widget areas
 *
 * @return void
 */
function theme_slug_register_footer_widgets() {

	// Register Footer Column 1 widget area.
	register_sidebar( array(
		'name' => __( 'Footer Column 1', 'theme-slug' ),
		'id' => 'footer-1',
		'description' => __( 'Appears on the first footer column.', 'theme-slug' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Register Footer Column 2 widget area.
	register_sidebar( array(
		'name' => __( 'Footer Column 2', 'theme-slug' ),
		'id' => 'footer-2',
		'description' => __( 'Appears on the second footer column.', 'theme-slug' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Register Footer Column 3 widget area.
	register_sidebar( array(
		'name' => __( 'Footer Column 3', 'theme-slug' ),
		'id' => 'footer-3',
		'description' => __( 'Appears on the third footer column.', 'theme-slug' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Register Footer Column 4 widget area.
	register_sidebar( array(
		'name' => __( 'Footer Column 4', 'theme-slug' ),
		'id' => 'footer-4',
		'description' => __( 'Appears on the fourth footer column.', 'theme-slug' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

}
add_action( 'widgets_init', 'theme_slug_register_footer_widgets', 20 );

style-flexbox.css

.footer-widgets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-right: -2em;
}

.footer-widget-column {
    width: 25%;
    padding-right: 2em;
    box-sizing: border-box;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

style-flexible-columns.css

/* One Column Footer Widgets */
.footer-widget-column:nth-child(1):nth-last-child(1) {
	float: none;
	width: 100%;
}

/* Two Column Footer Widgets */
.footer-widget-column:nth-child(1):nth-last-child(2),
.footer-widget-column:nth-child(2):nth-last-child(1) {
	width: 50%;
}

/* Three Column Footer Widgets */
.footer-widget-column:nth-child(1):nth-last-child(3),
.footer-widget-column:nth-child(2):nth-last-child(2),
.footer-widget-column:nth-child(3):nth-last-child(1) {
	width: 33.3333%;
}

style.css

.site-footer {
    clear: both;
}

.footer-widgets {
    margin-right: -2em;
}

.footer-widget-column {
	float: left;
	width: 25%;
	padding-right: 2em;
	box-sizing: border-box;
}