Using Flexbox for Modern Layouts in CSS
Learn how to create flexible layouts using Flexbox in CSS. Understand the properties like justify-content and align-items to control item positioning and spacing. Improve your web design skills with Dr. Ahmad Al-Sabhany from AlMaarif University College.
Uploaded on | 0 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Chapter 6 Layouts using Flexbox ! Dr. Ahmad Al-Sabhany CS Department AlMaarifUniversity College
Outline Layout using float, tables, position justify-content align-items flex-direction flex-wrap align-content flex-flow align-content gap flex grow flex shrink order Demo Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 2
Layout: Flex CSS Flexbox Layout Module Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element Usage display: flex; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 3
Example <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: DodgerBlue;} .flex-container > div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px;} </style> </head> <body> <h1>Create a Flex Container</h1> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 4
Justify Content The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). justify-content: flex-start|flex-end|center|space-between|space-around|space- evenly|initial|inherit; flex-start Default value. Items are positioned at the beginning of the container flex-end Items are positioned at the end of the container center Items are positioned in the center of the container space-between Items will have space between them space-around Items will have space before, between, and after them space-evenly Items will have equal space around them Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 5
Align Items The align-items property specifies the default alignment for items inside a flexbox or grid container. In a flexbox container, the flexbox items are aligned on the cross axis, which is vertical by default (opposite of flex-direction). align-items: normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit; normal Default. Behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size. stretch Items are stretched to fit the container center Items are positioned at the center of the container flex-start Items are positioned at the beginning of the container flex-end Items are positioned at the end of the container start Items are positioned at the beginning of their individual grid cells, in the block direction end Items are positioned at the end of the their individual grid cells, in the block direction baseline Items are positioned at the baseline of the container Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 6
Flex Direction The flex-direction property specifies the direction of the flexible items. flex-direction: row|row-reverse|column|column-reverse|initial|inherit; row Default value. The flexible items are displayed horizontally, as a row row-reverse Same as row, but in reverse order column The flexible items are displayed vertically, as a column column-reverse Same as column, but in reverse order Note: By default (row) the main axis is horizontal but when switch the direction to column the main axis is vertical. Remember, justify content will align items on the main axis and align items will align items on the cross axis. Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 7
Flex Wrap The flex-wrap property specifies whether the flexible items should wrap or not. flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; nowrap Default value. Specifies that the flexible items will not wrap wrap Specifies that the flexible items will wrap if necessary wrap-reverse Specifies that the flexible items will wrap, if necessary, in reverse order Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 8
Flex Flow The flex-flow property is a shorthand property for setting both the flex-direction and flex- wrap properties. great for responsive design Example: flex-flow: row wrap; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 9
Align Content The align-content property specifies how flex lines are distributed along the cross axis in a flexbox container. In flexbox layout, the main axis is in the flex-direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical) align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit; stretch Default value. Lines stretch to take up the remaining space center Lines are packed toward the center of the flex container flex-start Lines are packed toward the start of the flex container flex-end Lines are packed toward the end of the flex container space-between Lines are evenly distributed in the flex container space-around Lines are evenly distributed in the flex container, with half-size spaces on either end space-evenly Lines are evenly distributed in the flex container, with equal space around them Works only with flex-wrap:wrap; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 10
Gap The gap property defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout. It is a shorthand for the following properties: Examples: gap:20px; add gap of 20px horizontally and vertically Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 11
Flex Grow This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor). The main size is either width or height of the item which is dependent on the flex-direction value. Default value is 0, and negative numbers are invalid; Example: flex-grow: 3; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 12
Flex Shrink The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. Example: flex-shrink: 2; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 13
Order The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container. </style> div#myRedDIV {order: 2;} div#myBlueDIV {order: 4;} div#myGreenDIV {order: 3;} div#myPinkDIV {order: 1;} </style> </head> <body> <h1>The order Property</h1> <div id="main"> <div style="background-color:coral;" id="myRedDIV"></div> <div style="background-color:lightblue;" id="myBlueDIV"></div> <div style="background-color:lightgreen;" id="myGreenDIV"></div> <div style="background-color:pink;" id="myPinkDIV"></div> </div> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 14
Full Example <html> <head> <style> .item{ width:100px; min-height: 100px; background-color: rgb(223, 96, 96); margin: 20px; font-size: 90px; text-align: center; color: white; } .container{ height: 800px; width:70%; background-color: blanchedalmond; margin: auto; border: 5px solid black; display: flex; justify-content:space-evenly; align-items: stretch; flex-wrap:wrap; } </style> </head> <body style="background-color:rgb(180, 218, 221)"> <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 15
Show Case Try it Yourself ! alsabhany@uoa.edu.iq Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 16
