New

Long-Term Learning

Learn efficiently and remember over time.

Start Long-Term Learning

Get personalized study reminders at intervals optimized for better retention.
Track your progress on this set by creating a folder
Or add to an existing folder

Add this set to a folder

  • Today, the CSS Flexbox Box model and the Grid Layout model reduce the ____

    amount of code required for crossdevice compatibility.

    Flexboxes hold text, images, and other content, and the browser automatically adjusts the size of the box depending on ___

    the screen size being used to view the HTML document.

    grid layouts ___

    are simply columns and rows that control the layout of content in an HTML document.

    A user interface (UI) is the portion of a Web site or application with which a ___

    user interacts.

    The UI has a layout, which can range from ultra simple with just a ___

    button or two to highly complex with many parts, and each part can contain one or more buttons, menus, toolbars, forms, and so on.

    Positioning and autosizing of UI elements has become central to ___

    good design.

    relative positioning doesn't work for most mobile Web applications because it results in ___

    inappropriate overlapping of elements or elements appearing in the wrong places.

    A combination of absolute positioning and flexible boxes (containers) works much better for ___

    mobile Web applications and parts of Web pages in general.

    a UI element that should always appear in the same place on the screen, such as a header or footer, should use ___

    absolute positioning.

    the CSS3 Flexbox Box model is ideal for items that should resize or ___

    reposition themselves (horizontally or vertically) depending on the size of the screen.

    the CSS3 Grid Layout model, which gives you greater control over ___

    complex layouts than the flexbox model.

    vendor prefix ? ___

    a keyword surrounded by dashes, to the front of a CSS3 property name.

    Internet Explorer uses the ___

    -ms- prefix.

    Firefox supports the ___

    -moz- prefix.

    Opera supports the ___

    -o- prefix.

    Chrome and Safari support the ___

    -webkit- prefix.

    To apply the flexbox style to elements and view them in Firefox, you currently need to use the ___

    -moz-flexbox property.

    A best practice is to include all four vendor prefixes for CSS3 features that ___

    are still emerging.

    If a browser simply doesn't support the feature or the vendor prefix property, the feature will not ___

    display properly.

    Another best practice, especially during the transition to CSS3, is to use ___

    generic font families to prevent potential viewing problems across different browsers.

    A «monospace» font family, either «serif» or «sans serif», is the best way to ___

    avoid unexpected results.

    CSS3 also offers the ability to use any font you want. The key is to learn when to use «monospace» and when it's OK to ___

    use a fancier font.

    Flexboxes are designed for ___

    toolbars, menus, forms, and similar elements in Web pages and applications

    Grids are better suited to ___

    more complex designs.

    Years ago, the W3C created specifications for a simple box model, called the ___

    CSS Box model.

    CSS Box model. This model describes the boxes that ___

    surround content in an HTML document,
    whether the document becomes a Web page or a Web application.

    The parts of the CSS Box model are ___

    margin, border, padding, and content.

    The border surrounds the ___

    box itself.

    A border can be transparent, or ___

    it can be colored and have a pattern like a dashed line.

    The «padding» is the space between ___

    the border of the box and its content.

    The «content» is whatever is displayed in the box, such as ___

    text and images.

    You use the border, margin, padding, height, and width CSS properties to ___

    modify the various parts of the box model.

    A major issue with the «CSS Box model» is that different Web browsers apply the CSS properties ___

    differently.

    Two other concepts to understand about the CSS Box model are ___

    «block-level» and «inline» elements.

    A «block-level element» creates boxes that contribute to the ___

    layout of the document.

    Sections, articles, paragraphs, lists, and images are examples of ___

    «block-level» elements.

    «Inline elements» are designed for laying out text and don't ___

    disrupt the flow of the document.

    Applying boldface and the new HTML5 mark element are examples of ___

    inline elements.

    a «parent box» can contain one or ___

    more boxes.

    The boxes contained within a parent box are referred to as ___

    «child boxes».

    A child can inherit CSS styles from a parent, which means ___

    styles applied to a parent also apply to a child.

    Not all CSS properties are inheritable; when applying styles, you need to check the ___

    CSS specification to determine property inheritance.

    to use CSS to control layout that renders well in various browsers and when viewed from different screen sizes. The CSS3 «Flexbox Box» and ___

    «Grid Layout» models address this concern.

    The CSS «Flexbox Box model» is a layout mode for using flexible boxes in ___

    user interfaces.

    A ___ offers flexible layouts for UI design.

    «flexbox»

    You can lay out the contents of a flexbox dynamically in any ___

    direction, whether left, right, up, or down.

    You can also swap the order of boxes and flex their sizes and positions to ___

    fill the available space.

    A multi-line flexbox wraps ___

    content into multiple lines, much like a word processor handles text in a paragraph.

    Flexbox layout is similar to block layout, but flexbox doesn't use ___

    columns or floats.

    whereas block layout typically lays out content vertically (and inline layout tends to lay out content horizontally), a flexbox resizes in ___

    either direction.

    Where the Flexbox Box model is suitable for simple things like buttons, toolbars, and many forms, you can use the CSS Grid Layout model for ___

    more complex layouts.

    The grid layout model lets you control the design of __

    sections or entire HTML-based documents using CSS3.

    As the name implies, a grid layout uses rows and ___

    columns to make the design look cleaner and structured

    Grid layout also offers modularity, so you can easily drop elements into a grid, or move ___

    parts of a grid to a different area of a document.

    Grids are much more flexible and easier to work with than using ___

    HTML tables or even columns or floats to structure layout.

    Both a flexbox and its contents can be configured to change size, horizontally and ___

    vertically, when the screen on which they're displayed changes size.

    You define an element as a flexbox using the CSS properties display:flexbox or ___

    display:inline-flexbox

    flexbox? ___

    Sets the flexbox as a block-level element

    inline-flexbox? ___

    Sets the flexbox as an inline-level element

    A box within a box is a ___

    child box, which can be flexible or not.

    A child box is referred to as a ___

    flexbox item.

    Flexbox also introduces nine other properties ? ___

    flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, flex-wrap

    A flexbox can include child boxes that are flexible by ___

    height and width.

    The «flex» property makes child boxes ___

    flexible.

    The «flex-flow» property sets ___

    the «flex-direction» and «flex-wrap» properties of a flexbox (the parent box) at the same time.

    the «flex» property, which controls the ___

    height and width of flexbox items.

    Whereas the display: flexbox property creates a flexible parent box, the flex property is what gives ___

    the flexible nature to child boxes.

    The display: flexbox property is used without ___

    additional values.

    The flex property can take on a positive and/or negative flex value, a preferred size, and the none keyword : ___

    flex: pos-flex neg-flex preferred-size none

    If space is left over in the flexbox when the screen size increases, the flexbox items expand to fill up the space based on ___

    the positive flex value.

    With Flex value of 1 means ___

    each flexbox item will take up one equal part of the available space.

    With Flex value of 2 means ___

    each item will take up two equal parts.

    If you don't specify a positive «flex» value, it defaults to ___

    1.

    Omission of a negative «flex» value
    defaults to ___

    0.

    The «preferred-size» value can be any value that's valid for ___

    the CSS height and width property, such as 100px.

    If you don't specify a «preferred-size» value, the default is ___

    0px.

    You can also set the «preferred-size» value to «auto», which uses the value of the ___

    «width» or «height» property as the «preferred size».

    The keyword none is equivalent to ___

    0 0 auto.

    The power of flexbox items is that they can freely ___

    scale or dynamically adjust their main size.

    The flexbox items increase or decrease in size based on ___

    the available space in the flexbox in which they reside.

    The display: flexbox CSS property creates the ___

    parent box—the flexbox.

    The «flex» property applies flexibility to each ___

    child box.

    The use of an outline around the flexbox (parent box) is to make it easier to identify the ___

    borders of the flexbox. You don't have to include an outline around flexboxes in your applications or Web pages.

    Alternatively, you can use the CSS «flex function» with the CSS height or width property to ___

    control the height and width of flexbox items.

    The flex property and flex function behave the same but use slightly different syntax—a function includes ___

    values within parentheses.

    The «flex-wrap» property determines whether child boxes automatically create a ___

    new line and wrap onto it

    The flex-wrap property uses the
    ___

    nowrap, wrap, and wrap-reverse values.

    «vendor prefixes» are frequently used during the transition to CSS3 to make the ___

    code compatible with as many browsers as possible.

    div>div, which is simply a shorthand way to apply styles to a group of HTML elements without ___

    assigning classes

    The second set of div styles apply to the flexbox items: the «width» property along with the flex function control the width of the flexbox items, which have a «preferred width» of 75 pixels but will fill any available space when the screen size increases : ___

    div>div {
    width: flex(1 75px);

    The «flex-wrap» property with the wrap forces flexbox items to wrap within the flexbox: ___

    div {
    ...
    flex-wrap: wrap;
    ...
    }

    A few other properties you might use fairly often with flexboxes are: ___

    flex-pack, flex-align

    «flex-pack»: Justifies the alignment of child boxes within a flexbox and minimizes whitespace in the parent box. This property accepts one of four values: ___

    «start», «end», «justify», or «center» (+«distribute»).

    «flex-align»: Sets the default alignment for child boxes, but with a twist. If the orientation of the parent box is horizontal, flex-align determines the ___

    vertical alignment of the child boxes, and vice versa.

    After a flexbox's children have finished flexing and if space is still available in the flexbox, the children can be aligned with the ___

    flex-pack and flex-align (or flex-item-align) properties.

    The most important thing to remember is that you apply the flex-pack property to the ___

    parent flexbox in your CSS code, and apply flex-align to the child items.

    The «flex-direction» property affects the direction of child boxes in the parent box. It uses the ___

    row, row-reverse, column, and column-reverse values.

    The «flex-flow» property sets the flex-direction and flex-wrap properties at the ___

    same time.

    APAGAR

    APAGAR

    The following example uses the flex-flow property with the column value: ___

    <style>
    div {
    display: flex;
    flex-flow: column;
    ...

    To reverse the order of the child boxes, change each of the «flex-flow» column values to ___

    «column-reverse» (flex-flow: column-reverse;)

    You can control the order and arrangement of the contents of a flexbox using the ___

    «flexorder» property.

    flexorder property rearranges child items within a flexbox. To do so, the property assigns child boxes to groups, and then controls the order in which they ___

    appear in a layout, beginning with the lowest numbered group.

    «Media queries» enable you to ___

    adapt an HTML document to end-user devices.

    HTML media element types include ___

    aural, braille, handheld, print, projection, screen, tty, and tv.

    The «@media all» rule indicates that the CSS should be applied to ___

    all output media.

    The «flex-order» property places child boxes into ___

    ordered groups.

    You declare groups and assign a number to them in CSS using the flex-order property, and any child items not explicitly assigned to a group remain in group 0, and declared groups appear __

    before group 0.

    «Grid layouts» are similar to spreadsheets in that they use ___

    columns, rows, and cells, but you can create many different types of layouts that, in the end, don't look like a spreadsheet at all.

    Grid layouts are best suited for more complex layouts than ___

    flexbox can easily handle.

    interfaces are good candidates for grids, as are ___

    newspaper layouts

    A grid layout enables you to position rows and columns for ___

    precise control over your layout, with a fraction of the CSS code as would be required using older techniques

    Another benefit of grids are their ___

    modularity.

    You define a grid element (layout) using the «display:grid» or ___

    «display:inline-grid» CSS property. This creates the container for the layout.

    Child elements of a grid are called ___

    grid items

    Child elements of a grid are called grid items, which you position and size according to: ___

    Grid tracks, Grid tracks, Grid cells

    Grid tracks:? ___

    The columns and rows of the grid; you define grid tracks using the grid-rows and grid-columns properties

    Grid lines: ? ___

    The horizontal and vertical lines that divide columns or rows

    Grid cells:? ___

    The logical space used to lay out grid items, similar to a cell in a spreadsheet

    grid properties and their values are ___

    grid-columns, grid-rows, grid-template, grid-cell, grid-column, grid-row, grid-column-span, grid-row-span, grid-column-sizing, grid-row-sizing, grid-flow, grid-column-align, grid-row-align

    The CSS properties display:grid (or display:inline-grid), grid-columns, and grid-rows are used to create ___

    grid structures. The size of columns and rows can be fixed or flexible.

    The primary properties that create a grid are ___

    display:grid (or display:inline-grid), grid-columns, and grid-rows.

    You can define columns and rows to have a fixed size, which doesn't resize when the screen size changes, or a fractional size relative to ___

    the grid.

    Fractional sizes are defined using ___

    «fr», so a row defined as «2fr» will be twice the size of a row defined as «1fr».

    The value «1fr» stands for ___

    "one fraction."

    You can also use the "auto" value to make columns or rows ___

    fit their content.

    The first column is a fixed width of 150 pixels. The second column adjusts its width to fit the column's content, as indicated by the auto keyword. The third column is two fraction units of the remaining space in the grid: ___

    -ms-grid-columns: 150px auto 2fr;

    The first row is 50 pixels tall, the second row is 6 ems tall, and the third row adjusts to fit the content of the row: ___

    -ms-grid-rows: 50px 6em auto;

    A grid template uses alphabetical characters to represent the ___

    position of items in a grid.

    a «grid template», which is like an ___

    empty table into which data can be flowed.

    You use the grid-position property and assign an ___

    alphabetical character as a position value.

    The following examples show the grid-position property defined for four items: ___

    news { grid-position: a; }
    weather { grid-position: b; }
    sports { grid-position: c; }
    events { grid-position: d; }

    After assigning positions, you create a layout using strings of characters. A string equals a row, and each character in the string is a ___

    column.

    For example, to create a grid with one row with four columns that size to fit the content, you would use the following syntax: ___

    div {
    grid-template: "abcd";
    grid-rows: auto;
    grid-columns: auto;
    }

    Please allow access to your computer’s microphone to use Voice Recording.

    Having trouble? Click here for help.

    We can’t access your microphone!

    Click the icon above to update your browser permissions above and try again

    Example:

    Reload the page to try again!

    Reload

    Press Cmd-0 to reset your zoom

    Press Ctrl-0 to reset your zoom

    It looks like your browser might be zoomed in or out. Your browser needs to be zoomed to a normal size to record audio.

    Please upgrade Flash or install Chrome
    to use Voice Recording.

    For more help, see our troubleshooting page.

    Your microphone is muted

    For help fixing this issue, see this FAQ.

    Star this term

    You can study starred terms together

    NEW! Voice Recording

    This is a Plus feature