Skip to content
Only 637 Bytes of CSS to create a responsive Flex Layout
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE.md
README.md
apg-flex.css
apg-flex.min.css

README.md

Code

	/* APG-FLEX : v1.0 (2019-11-02) - ©Philippe Gouillou (www.gouillou.com) - LGPL 3 */

	.acontainer 				{display: block; max-width: 1170px; margin: 0 auto !important;}
	.arow 						{display: flex; margin: 0; padding: 0;}

	@media(min-width: 576px)	{.arowsm{display: flex}}
	@media(min-width: 768px)	{.arowmd{display: flex}}
	@media(min-width: 992px)	{.arowlg{display: flex}}
	@media(min-width: 1200px)	{.arowxl{display: flex}}

	.arow>div,
	.arowsm>div,
	.arowmd>div,
	.arowlg>div,
	.arowxl>div 				{flex:1}

	.flex2 						{flex:2 !important}
	.flex3 						{flex:3 !important}
	.flex4 						{flex:4 !important}
	.flex5 						{flex:5 !important}
	.flex6 						{flex:6 !important}
	.flex7 						{flex:7 !important}
	.flex8 						{flex:8 !important}
	.flex9 						{flex:9 !important}
	.flex10 					{flex:10 !important}
	.flex11 					{flex:11 !important}
	.flex12 					{flex:12 !important}

Minified Code (637 Bytes)

.acontainer{display:block;max-width:1170px;margin:0 auto !important}.arow{display:flex;margin:0;padding:0}@media(min-width:576px){.arowsm{display:flex}}@media(min-width:768px){.arowmd{display:flex}}@media(min-width:992px){.arowlg{display:flex}}@media(min-width:1200px){.arowxl{display:flex}}.arow>div,.arowsm>div,.arowmd>div,.arowlg>div,.arowxl>div{flex:1}.flex2{flex:2 !important}.flex3{flex:3 !important}.flex4{flex:4 !important}.flex5{flex:5 !important}.flex6{flex:6 !important}.flex7{flex:7 !important}.flex8{flex:8 !important}.flex9{flex:9 !important}.flex10{flex:10 !important}.flex11{flex:11 !important}.flex12{flex:12 !important}

Installation

  1. Just copy/paste the code above (regular or minified version) somewhere in your CSS file or download the regular (.css) or minified (.min.css) and link it in the header of your HTML file.
  2. Create your HTML according the following rules

Rem: The names of the CSS classes have been choosen to allow a perfect compatibility with Bootstrap (you can mix both).

How to use

Beware: it works the opposite of Bootstrap: you modify the row, not the column!

  1. For each row: indicate at which limit you want the columns to collapse. A row is created by a div with one of the followings classes (example : <div class="arow">) :

    • arow: never collapses
    • arowsm: collapses under 576px
    • arowmd: collapses under 768px
    • arowlg: collapses under 992px
    • arowxl: collapses under 1200px
  2. Inside the row, add one <div> per column (as much as you want: they will be evenly distributed)

  3. If needed, add to the column div one of the classes flex2 to flex12 to define its respective size (default = flex1; example <div class="flex2">)

Notes

  1. For Container (max-width: 1070px and centered), add the class "acontainer" to a row (ex: <div class="arow acontainer">)

  2. A div is considered as a Flex Column if and only if it is directly under a arowXX. You can change this behavior by using style (<div style="display: block;">):

    • arow : row
      • div : displayed as Flex (column)
        • div : displayed as Block (default behavior)
      • div : displayed as Flex (column)
  3. If you need to add a div

  4. For nesting, just remember that a column must exist in each row (see example below)

  5. Sizes are respective! (see example below)

  6. flex2...flex12 are optionals: suppress or modify them as needed

Simple Example

See the Demo

4 columns, the second one twice the size of the others (so a total size of 5) and containing 4 nested columns:

	<div class="arowsm">            <!-- Row collapsing at 576px -->
	    <div>flex: 1</div>          <!-- Column size 1/5 of the full width -->
	    <div class="flex2">         <!-- Column size 2/5 of the full width -->
	        <div class="arowlg">    <!-- Nested row collapsing at 992px-->
	            <div>flex: 1</div>  <!-- Column size 1/4 of 2/5 = 1/10 of the full width -->
	            <div>               <!-- Column size 1/4 of 2/5 = 1/10 of the full width -->
	                <div>B</div>    <!-- Block (not a column!) -->
	            </div>
	            <div>flex: 1</div>  <!-- Column size 1/4 of 2/5 = 1/10 of the full width -->
	            <div>flex: 1</div>  <!-- Column size 1/4 of 2/5 = 1/10 of the full width -->
	        </div>
	    </div>
	    <div>flex: 1</div>          <!-- Column size 1/5 of the full width -->
	    <div>flex: 1</div>          <!-- Column size 1/5 of the full width -->
	</div>
You can’t perform that action at this time.