CSS Flexbox and Responsive Web Design PDF

CSS FLEXBOX AND RESPONSIVE WEB DESIGN ISP465  CSS FLEXBOX LAYOUT OUTLINES RESPONSIVE WEB DESIGN CSS FLEXBOX LAYOUT  CSS Flexible Box Layout (Flexbox) The Flexbox Layout (Flexible Box) aims at providing a more efficient way to lay out, align and distribute space a...

CSS FLEXBOX AND RESPONSIVE WEB DESIGN ISP465  CSS FLEXBOX LAYOUT OUTLINES RESPONSIVE WEB DESIGN CSS FLEXBOX LAYOUT  CSS Flexible Box Layout (Flexbox) The Flexbox Layout (Flexible Box) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.Best used for one dimension – a row or a column The display property Configures a flexbox container -> display: flex; Basic terminology: parent element, known as “flex container” a child element of the flex container, known as “flex item”.container { display: flex; } 4  Flex Layout The flex layout is based on “flex-flow directions”. Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end). main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below). main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end. main size – A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension. cross axis – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction. cross-start | cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side. cross size – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension. 5 Flexbox Properties: Parent (Flex container) display This defines a flex container; inline or block.container { depending on the given value. It enables a flex display: flex; } context for all its direct children. flex-direction.container { flex-direction: row | row-reverse | This establishes the main-axis, thus defining the column | column-reverse; direction flex items are placed in the flex } container. row (default): left to right in ltr; right to left in rtl row-reverse: right to left in ltr; left to right in rtl column: same as row but top to bottom column-reverse: same as row-reverse but bottom to top Flexbox Properties: Parent (Container) flex-wrap.container { flex-wrap: nowrap | wrap | wrap- By default, flex items will all try to fit onto one reverse; line. } nowrap (default): all flex items will be on one line wrap: flex items will wrap onto multiple lines, from top to bottom. wrap-reverse: flex items will wrap onto multiple lines from bottom to top. flex-flow This is a shorthand for the flex-direction.container { and flex-wrap properties, which together flex-flow: column wrap; define the flex container’s main and cross axes. } The default value is row nowrap.  Flexbox Properties: Parent (Container) justify-content This defines the alignment along the main axis. It helps distribute extra free.container { space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control justify-content: flex-start | flex- over the alignment of items when they overflow the line. end | center | space-between | space- flex-start (default): items are packed toward the start of the flex-direction. around | space-evenly | start | end | flex-end: items are packed toward the end of the flex-direction. left | right... + safe | unsafe; start: items are packed toward the start of the writing-mode direction. } end: items are packed toward the end of the writing-mode direction. left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start. right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start. center: items are centered along the line space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.  Flexbox Properties: Parent (Container) align-item This defines the default behavior for how flex.container { align-items: stretch | flex-start | items are laid out along the cross axis on the flex-end | center | baseline | first current line. Think of it as the justify-content baseline | last baseline | start | version for the cross-axis (perpendicular to the end | self-start | self-end +... main-axis). safe | unsafe; } stretch (default): stretch to fill the container (still respect min-width/max-width) flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex- direction rules or the writing-mode rules. flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules. center: items are centered in the cross-axis baseline: items are aligned such as their baselines align  Flexbox Properties: Parent (Container) gap, row-gap, column-gap.container { The gap property explicitly controls the space display: flex;... between flex items. It applies that spacing gap: 10px; gap: 10px 20px; row-gap: 10px; It is not exclusively for flexbox, gap works in grid column-gap: 20px; and multi-column layout as well. } Flexbox Properties: Children (flex items).item { order order: 5; By default, flex items are laid out in the source order. However, } the order property controls the order in which they appear in the flex container. Negative numbers are invalid. flex-grow This defines the ability for a flex item to grow if necessary. It.item { accepts a unitless value that serves as a proportion. It dictates flex-grow: 4; what amount of the available space inside the flex container the } item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others. Negative numbers are invalid. Flexbox Properties: Children (flex items) flex-shrink.item { flex-shrink: 3; This defines the ability for a flex item to shrink } if necessary. Negative numbers are invalid. flex-basic This defines the default size of an element.item { before the remaining space is distributed. It flex-basis: | auto; can be a length (e.g. 20%, 5rem, etc.) or a } keyword. If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value. Flexbox Properties: Children (flex items) flex.item { flex: none | [ This is the shorthand for flex-grow, flex-shrink and flex- ? || ] basis combined. } The second and third parameters (flex-shrink and flex- basis) are optional. The default is 0 1 auto, but if you set it with a single number value, like flex: 5;, that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%; It is recommended that you use this shorthand property rather than set the individual properties. nav { flex: 1; } main { flex: 7; } aside { flex: 2; } Flexbox Properties: Children (flex items) align-self.item { align-self: auto | flex-start | This allows the default alignment (or the one flex-end | center | baseline | stretch; specified by align-items) to be overridden for } individual flex items. Configure Flex Items By default flex items are flexible in size and allocated the same amount of space in the flex container The flex property Customizes the size of each flex item Indicated the flex grow factor Indicates the flex shrink factor Can be used to indicate a proportional flexible item nav { flex: 1; } main { flex: 7; } aside { flex: 2; } 15 RESPONSIVE WEB DESIGN WHAT IS RESPONSIVE WEB DESIGN? Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Techniques: Fluid Layout CSS Media Queries Flexible Images MEDIA QUERIES Media queries can modify the appearance (and even behavior) or a website or app based on a matched set of conditions about the user’s device, browser or system settings. Media queries can be implemented at: HTML ( area using by attaching different css file based on device) CSS (the most practical approach using @media-queries syntax) JavaScript (using the window.matchMedia() method to define the conditions) CSS Media Queries Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device. Media queries can be used to check many things, such as: width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).  CSS Media Queries Anatomy Media type What type of media are you trying to target? In many (if not most) cases, a screen value used here, which makes sense since many of the media types we’re trying to match are devices with screens attached to them. Some of supported media: all: Matches all devices print: Matches documents that are viewed in a print preview or any media that breaks the content up into pages intended to print. screen: Matches devices with a screen Media feature Start defining what features you are trying to match it to. Most frequently used are screens to width, where screen is the type and both min-width and max-width are features with specific values. Other types of media features supported: viewport display quality color interaction video prefixed scripting user preference  CSS Media Queries Anatomy Operator Media queries support logical operators like many programming languages that able to match media types based on certain conditions. The @media rule is itself a logical operator that is basically stating that “if” the following types and features are matches, then do some stuff. and use the and operator if you want to target screens within a range of widths: or (or comma-separated) use comma-separate features as a way of using an or operator to match different ones: not target devices by what they do not support or match. This example declaration removes the body’s background color when the device is a printer and can only show one color. CSS Media Queries Anatomy (cont.) or (or comma-separated) use comma-separate features as a way of using an or operator to match different ones: not target devices by what they do not support or match. This example declaration removes the body’s background color when the device is a printer and can only show one color. CSS Media Queries Breakpoint @media only screen and (max-width: 600px) {...} @media only screen and (min-width: 600px) {...} @media only screen and (min-width: 768px) {...} @media only screen and (min-width: 992px) {...} @media only screen and (min-width: 1200px) {...} Thank You