PHILIPPE GOUILLOU

APG-FLEX : DEMO

APG-FLEX : Code APG-FLEX : Demo APG-FLEX : Snippets APG-FLEX sur Github

Demo of APG-FLEX, an extremely simple CSS responsive Flex Layout Framework of only 662 Bytes to accelerate web developpment.

Resize your window to see the order of the collapses: purple > green > red > blue (grey never collapes)

Copy the CSS code of APG-FLEX or pull it from GITHUB

Get the Snippets for VS Code

Simple Example

flex: 1
flex: 1
flex: 1
B
flex: 1
flex: 1
flex: 1
flex: 1

	<div class="demo">
		<div class="arowsm acontainer">	<!-- Row collapsing at 576px - Max-width = 1070px -->
			<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 of the full width -->
					<div>flex: 1		<!-- Column size 1/4 of 2/5 of the full width -->
						<div>B</div>	<!-- Block (not a column!) -->
					</div>  
					<div>flex: 1</div>  <!-- Column size 1/4 of 2/5 of the full width -->
					<div>flex: 1</div>  <!-- Column size 1/4 of 2/5 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>
	</div>

Complete Example

A
B
C
D
E
F
G
H
I
J
K
L
M (flex3)
N
O
P (flex6)
Q
R
S
T
U
V
W
X

	<div class="arow">						<!-- arow : no collapse -->
		<div>A</div>						<!-- div : style = "flex: 1" -->
		<div>B</div>
		<div>C</div>
		<div>D</div>
		<div>E</div>
		<div>F</div>
		<div>G</div>
		<div>H</div>
		<div>I</div>
		<div>J</div>
		<div>K</div>
		<div>L</div>
	</div>
	<div class="arowsm acontainer">			<!-- arowsm : collapse at 576px ; acontainer : "max-width: 1070px" -->
		<div class="flex3">M (flex3)</div>	<!-- flex3 : style="flex: 3" -->
		<div>N</div>
	</div>	
	<div class="arow"> 
		<div>
			<div class="arowxl acontainer">
				<div>O</div>
				<div class="flex6">P (flex6)
					<div class="arowmd">
						<div>
							<div class="arowsm">
								<div>
									<div class="arowmd">
										<div>Q</div>
										<div>R</div>
									</div>
								</div>
								<div>
									<div class="arowsm">
										<div>S</div>
										<div>T</div>
									</div>
								</div>
							</div>
						</div>
						<div>
							<div class="arowlg">
								<div>U</div>
								<div>V</div>
							</div>
						</div>
					</div>
				</div>
				<div>W</div>
				<div>X</div>
			</div>
		</div>
	</div>

Inverted collapse Example

A
B
C

	<!-- Put A and B on the same row when C is hidden -->

	<style>@media(max-width: 576px) {.dhidden-xs {display: none;}}</style>
	<div class="arowsm acontainer">
		<div>
			<div class="browsm">
				<div class="acolfinal text-center">A</div>
				<div  class="acolfinal text-center">B</div>
			</div>
		</div>
		<div class="acolfinal text-center dhidden-xs">C</div>
	</div>