Layout – Flex
Flex based layout systems are used for layouting, align content and distribute space. CSS flex property is used for setting such layouts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < div class = "app-flex" > < div class = "flex__col" > < div class = "border-box-styled" >This is item 1</ div > </ div > < div class = "flex__col" > < div class = "border-box-styled" >This is item 2</ div > </ div > < div class = "flex__col" > < div class = "border-box-styled" >This is item 3</ div > </ div > < div class = "flex__col" > < div class = "border-box-styled" >This is item 4</ div > </ div > </ div > < div class = "app-flex is--padded is--center-aligned" > < div class = "flex__col" > < div class = "border-box-styled" >This is item 1. This has more content and will probably need more space</ div > </ div > < div class = "flex__col" > < div class = "border-box-styled" >This is item 2. Center aligned one!</ div > </ div > < div class = "flex__col" > < div class = "border-box-styled" >This is item 3. This is the biggest of the lott but needs to be in the same width as others. It's easy to do this.</ div > </ div > </ div > |
1 2 3 4 5 6 7 8 9 | < div class = "app-flex is--padded" > < div class = "flex__col is--col-25" >Column 25</ div > < div class = "flex__col is--col-25" >Column 25</ div > < div class = "flex__col is--col-50" >Column 50</ div > </ div > < div class = "app-flex is--padded" > < div class = "flex__col is--col-60" >Column 60</ div > < div class = "flex__col is--col-40" >Column 40</ div > </ div > |