98 375 Enu 3.2 LP

MTA EXAM 98-375
HTML5 Application
Development Fundamentals
98-375: OBJECTIVE 3
Format the User Interface by
Using CSS
LESSON
3.2
Arrange user
interface (UI) content
by using CSS
OVERVIEW
Lesson 3.2
In this lesson, you will review the following:
Using the Flexible Box Model and grid layouts to establish

content alignment, direction, and orientation.
Proportional scaling and the use of free space for
elements within a flexible box or grid.
Ordering and arranging content.
Concepts for using flexbox for simple layouts and grid for
complex layouts.
Grid content properties for rows and columns.
Using application templates.
GUIDING QUESTIONS
Lesson 3.2
What additional features are added to the box model by

using the Flexible Box Model?
What are the various ways to allocate excess space using

the Flexible Box Model?
How does the new Flexible Box Model eliminate the need
for using float?
LECTURE
Lesson 3.2
Using Flexible Box and Grid Layouts to Establish

Content Alignment, Direction, and Orientation
The Flexible Box Model adds more options to the current box
model.
These new options allow developers to easily change content
alignment, content direction, and content orientation.
After a flex box is created, the developer can add child
elements, which reflect the alignment, direction, and
orientation set for the parent.
The need to use float is eliminated.
See next two slides for examples of using a flex box
FLEXIBLE BOX CONTINUED

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Example page using Flex Box</title>
<link href="flexboxForSimpleLayouts.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="flexbox">
<p class="box1">Box1</p>
</div>
</body>
</html>
Expected outcome:
CSS is listed on next page
FLEXIBLE BOX CONTINUED

#flexbox{
/* basic styling */
width: 200px; height: 300px; border: 1px solid #555; font: 14px Arial;
/* flexbox setup for safari and google chrome*/
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align:center;
/* flexbox setup for firefox */
display: -moz-box;
-moz-box-orient: horizontal;
/* flexbox setup for Internet Explorer 10 */
display: -ms-box;
-ms-box-orient: horizontal;
display: box;
box-orient: horizontal;
}
.box1{width:50px;height:20px;border:thick silver solid;background-color:teal;}
.box2{width:50px;height:20px;border:thick silver solid;background-color:fuchsia;}
.box3{width:50px;height:20px;border:thick silver solid;background-color:yellow;}
LECTURE
Lesson 3.2
Proportional Scaling and Use of Free Space

for Elements within a Flexible Box or Grid
Allows browsers to use the size of the graphical device to scale

the web page accordingly.
Builds a layout that is fluid but contains elements (such as

images or controls) that maintain their position and size
relative to each other.
Specifies how excess space is allocated by using the box-pack

property.
Controls how excess space along a parents layout axis is

proportionately allocated to child elements by using the boxflex property.
LECTURE
Lesson 3.2
Ordering and Arranging Content
Controls the direction that elements are laid out on the

page (top-to-bottom, left-to-right, right-to-left, or bottom-totop).
box-direction (normal, reverse, inherit)
box-orient (horizontal, vertical, inline-axis, block-axis, or
inherit)
Elements can be reordered on the screen in an order that is

different from how they are specified by the Document
Object Model (DOM).
LECTURE
Lesson 3.2
Concepts for Using Flexbox for Simple

Layouts and Grid for Complex Layouts
Using the new value (box) for the display property gives us
access to these attributes:
box-orient
box-pack
box-align
box-flex
box-ordinal-group
box-direction
box-shadow
Grid Properties:
grid-columns
grid-rows
LECTURE
Lesson 3.2
Grid Content Properties for Rows and

Columns
Using the grid property enables the developer to divide

space for major regions of a webpage or web app and to
define the relationship between parts of an HTML control in
terms of size, position, and layer.
This removes the need to create a fixed layout, which

cannot take advantage of available space within the
browser window.
It is similar to the concept of a table, allowing columns to

span rows and vice-versa.
LECTURE
Lesson 3.2
Using Application Templates
Templates allow elements to be placed in a visual order

independent of their source order, providing a type of wire
frame for the page to be filled in later with content.
Template-based positioning is an alternative to absolute

positioning.
Using application templates provides consistency and

repetition in a website.
DEMONSTRATION
Lesson 3.2
Using the Flexbox

In this demonstration, you will see how a page can be created
using flexbox:
Use the HTML file and CSS file included for this lesson.
View the new page using Internet Explorer; notice that
the new styles are applied but the orientation is not
horizontal (available in Internet Explorer 10).
If available, use Safari to see how the flexbox properties
align the boxes horizontally.
DISCUSSION
Lesson 3.2
Using CSS to Arrange Elements on the

Screen
How does the flexbox property make the relative position and
size of elements remain constant, even as screen and browser
window sizes vary and change?
IN-CLASS ACTIVITY
Lesson 3.2
Directions:
Read the scenario in the In-class Activity
Use the resources mentioned in this PowerPoint
presentation and your own investigative skills to answer the
questions.
Part of the activity includes drawing a web page with a
flexbox container and identifying the following properties:
box-orient
box-pack
box-align
box-flex
box-direction
REVIEW
Lesson 3.2
Can you answer these?
What additional features are added to the box model by

using the Flexible Box Model?
What are the various ways to allocate excess space using

the Flexible Box Model?
How does the new Flexible Box Model eliminate the need
for using float?
ADDITIONAL RESOURCES
Lesson 3.2
MSDN Resources
Flexible box
(Flexbox) Layout
http://msdn.microsoft.com/enus/library/hh673531(v=vs.85).aspx
CSS
http://msdn.microsoft.com/enus/library/hh673536(v=vs.85)
Other Resources
Test Drive Hands-on:

Windows 8 HTML5
Platform
http://ie.microsoft.com/testdrive/Graphics/
hands-on-css3/hands-on_flex.htm
HTML5 Rocks
http://www.html5rocks.com/en/tutorials/fle
xbox/quick/
W3 Schools
http://www.w3schools.com/cssref/default.a
sp#flexbox

98 375 Enu 3.2 LP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

98 375 Enu 3.2 LP

Uploaded by

Copyright:

Available Formats

MTA EXAM 98-375

In this lesson, you will review the following:

Using the Flexible Box Model and grid layouts to establish

What additional features are added to the box model by

What are the various ways to allocate excess space using

Using Flexible Box and Grid Layouts to Establish

FLEXIBLE BOX CONTINUED

FLEXIBLE BOX CONTINUED

Proportional Scaling and Use of Free Space

Allows browsers to use the size of the graphical device to scale

Builds a layout that is fluid but contains elements (such as

Specifies how excess space is allocated by using the box-pack

Controls how excess space along a parents layout axis is

Ordering and Arranging Content

Controls the direction that elements are laid out on the

Elements can be reordered on the screen in an order that is

Concepts for Using Flexbox for Simple

Grid Content Properties for Rows and

Using the grid property enables the developer to divide

This removes the need to create a fixed layout, which

It is similar to the concept of a table, allowing columns to

Using Application Templates

Templates allow elements to be placed in a visual order

Template-based positioning is an alternative to absolute

Using application templates provides consistency and

Using the Flexbox

Using CSS to Arrange Elements on the

Can you answer these?

What additional features are added to the box model by

What are the various ways to allocate excess space using

Test Drive Hands-on:

You might also like