Question types

Start with

Question limit

of 134 available terms

Print test

134 Matching questions

  1. A multi-line flexbox wraps ___
  2. The use of an outline around the flexbox (parent box) is to make it easier to identify the ___
  3. Two other concepts to understand about the CSS Box model are ___
  4. A «monospace» font family, either «serif» or «sans serif», is the best way to ___
  5. vendor prefix ? ___
  6. HTML media element types include ___
  7. 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 ___
  8. A «block-level element» creates boxes that contribute to the ___
  9. If you don't specify a positive «flex» value, it defaults to ___
  10. a «grid template», which is like an ___
  11. A child can inherit CSS styles from a parent, which means ___
  12. A border can be transparent, or ___
  13. 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 __
  14. 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 ___
  15. The border surrounds the ___
  16. A few other properties you might use fairly often with flexboxes are: ___
  17. The value «1fr» stands for ___
  18. APAGAR
  19. A grid layout enables you to position rows and columns for ___
  20. The CSS properties display:grid (or display:inline-grid), grid-columns, and grid-rows are used to create ___
  21. The «flex» property applies flexibility to each ___
  22. a «parent box» can contain one or ___
  23. Grid layout also offers modularity, so you can easily drop elements into a grid, or move ___
  24. You define a grid element (layout) using the «display:grid» or ___
  25. Chrome and Safari support the ___
  26. The following example uses the flex-flow property with the column value: ___
  27. The «padding» is the space between ___
  28. If you don't specify a «preferred-size» value, the default is ___
  29. CSS Box model. This model describes the boxes that ___
  30. The «content» is whatever is displayed in the box, such as ___
  31. You can lay out the contents of a flexbox dynamically in any ___
  32. a UI element that should always appear in the same place on the screen, such as a header or footer, should use ___
  33. The parts of the CSS Box model are ___
  34. The following examples show the grid-position property defined for four items: ___
  35. A best practice is to include all four vendor prefixes for CSS3 features that ___
  36. The boxes contained within a parent box are referred to as ___
  37. A combination of absolute positioning and flexible boxes (containers) works much better for ___
  38. The «flex-flow» property sets the flex-direction and flex-wrap properties at the ___
  39. To reverse the order of the child boxes, change each of the «flex-flow» column values to ___
  40. The keyword none is equivalent to ___
  41. «Media queries» enable you to ___
  42. You define an element as a flexbox using the CSS properties display:flexbox or ___
  43. Grids are much more flexible and easier to work with than using ___
  44. Applying boldface and the new HTML5 mark element are examples of ___
  45. Opera supports the ___
  46. Grid layouts are best suited for more complex layouts than ___
  47. Grid lines: ? ___
  48. Firefox supports the ___
  49. The «flex-flow» property sets ___
  50. The grid layout model lets you control the design of __
  51. The display: flexbox CSS property creates the ___
  52. Whereas the display: flexbox property creates a flexible parent box, the flex property is what gives ___
  53. Internet Explorer uses the ___
  54. For example, to create a grid with one row with four columns that size to fit the content, you would use the following syntax: ___
  55. Flexbox also introduces nine other properties ? ___
  56. Both a flexbox and its contents can be configured to change size, horizontally and ___
  57. 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 ___
  58. 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 : ___
  59. A user interface (UI) is the portion of a Web site or application with which a ___
  60. Another benefit of grids are their ___
  61. The flex-wrap property uses the
  62. The «flex-order» property places child boxes into ___
  63. The «flex-direction» property affects the direction of child boxes in the parent box. It uses the ___
  64. Child elements of a grid are called grid items, which you position and size according to: ___
  65. Flexboxes are designed for ___
  66. Flexbox layout is similar to block layout, but flexbox doesn't use ___
  67. The flex property can take on a positive and/or negative flex value, a preferred size, and the none keyword : ___
  68. You can also swap the order of boxes and flex their sizes and positions to ___
  69. A flexbox can include child boxes that are flexible by ___
  70. A child box is referred to as a ___
  71. The display: flexbox property is used without ___
  72. The flexbox items increase or decrease in size based on ___
  73. You can also use the "auto" value to make columns or rows ___
  74. A major issue with the «CSS Box model» is that different Web browsers apply the CSS properties ___
  75. After assigning positions, you create a layout using strings of characters. A string equals a row, and each character in the string is a ___
  76. You use the grid-position property and assign an ___
  77. Years ago, the W3C created specifications for a simple box model, called the ___
  78. The «@media all» rule indicates that the CSS should be applied to ___
  79. The flex property and flex function behave the same but use slightly different syntax—a function includes ___
  80. If space is left over in the flexbox when the screen size increases, the flexbox items expand to fill up the space based on ___
  81. To apply the flexbox style to elements and view them in Firefox, you currently need to use the ___
  82. «Grid layouts» are similar to spreadsheets in that they use ___
  83. 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: ___
  84. With Flex value of 1 means ___
  85. You can control the order and arrangement of the contents of a flexbox using the ___
  86. The CSS «Flexbox Box model» is a layout mode for using flexible boxes in ___
  87. Fractional sizes are defined using ___
  88. You use the border, margin, padding, height, and width CSS properties to ___
  89. Flexboxes hold text, images, and other content, and the browser automatically adjusts the size of the box depending on ___
  90. «vendor prefixes» are frequently used during the transition to CSS3 to make the ___
  91. The primary properties that create a grid are ___
  92. 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 ___
  93. the «flex» property, which controls the ___
  94. flexbox? ___
  95. Omission of a negative «flex» value
    defaults to ___
  96. «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 ___
  97. the CSS3 Grid Layout model, which gives you greater control over ___
  98. Grids are better suited to ___
  99. 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: ___
  100. Sections, articles, paragraphs, lists, and images are examples of ___
  101. A ___ offers flexible layouts for UI design.
  102. The UI has a layout, which can range from ultra simple with just a ___
  103. grid properties and their values are ___
  104. The «flex-wrap» property with the wrap forces flexbox items to wrap within the flexbox: ___
  105. The «flex» property makes child boxes ___
  106. «Inline elements» are designed for laying out text and don't ___
  107. whereas block layout typically lays out content vertically (and inline layout tends to lay out content horizontally), a flexbox resizes in ___
  108. With Flex value of 2 means ___
  109. Not all CSS properties are inheritable; when applying styles, you need to check the ___
  110. Child elements of a grid are called ___
  111. Another best practice, especially during the transition to CSS3, is to use ___
  112. The «preferred-size» value can be any value that's valid for ___
  113. the CSS3 Flexbox Box model is ideal for items that should resize or ___
  114. to use CSS to control layout that renders well in various browsers and when viewed from different screen sizes. The CSS3 «Flexbox Box» and ___
  115. relative positioning doesn't work for most mobile Web applications because it results in ___
  116. «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: ___
  117. grid layouts ___
  118. The power of flexbox items is that they can freely ___
  119. A grid template uses alphabetical characters to represent the ___
  120. Today, the CSS Flexbox Box model and the Grid Layout model reduce the ____
  121. Positioning and autosizing of UI elements has become central to ___
  122. Grid cells:? ___
  123. The most important thing to remember is that you apply the flex-pack property to the ___
  124. You can also set the «preferred-size» value to «auto», which uses the value of the ___
  125. If a browser simply doesn't support the feature or the vendor prefix property, the feature will not ___
  126. As the name implies, a grid layout uses rows and ___
  127. Alternatively, you can use the CSS «flex function» with the CSS height or width property to ___
  128. div>div, which is simply a shorthand way to apply styles to a group of HTML elements without ___
  129. interfaces are good candidates for grids, as are ___
  130. The «flex-wrap» property determines whether child boxes automatically create a ___
  131. inline-flexbox? ___
  132. A box within a box is a ___
  133. Grid tracks:? ___
  134. After a flexbox's children have finished flexing and if space is still available in the flexbox, the children can be aligned with the ___
  1. a code compatible with as many browsers as possible.
  2. b alphabetical character as a position value.
  3. c flexible.
  4. d newspaper layouts
  5. e HTML tables or even columns or floats to structure layout.
  6. f parent box—the flexbox.
  7. g new line and wrap onto it
  8. h additional values.
  9. i 0px.
  10. j assigning classes
  11. k «Grid Layout» models address this concern.
  12. l the available space in the flexbox in which they reside.
  13. m Sets the flexbox as a block-level element
  14. n vertical alignment of the child boxes, and vice versa.
  15. o APAGAR
  16. p sections or entire HTML-based documents using CSS3.
  17. q Grid tracks, Grid tracks, Grid cells
  18. r each flexbox item will take up one equal part of the available space.
  19. s modularity.
  20. t vertically, when the screen on which they're displayed changes size.
  21. u flexbox item.
  22. v the screen size being used to view the HTML document.
  23. w The logical space used to lay out grid items, similar to a cell in a spreadsheet
  24. x before group 0.
  25. y content into multiple lines, much like a word processor handles text in a paragraph.
  26. z aural, braille, handheld, print, projection, screen, tty, and tv.
  27. aa are simply columns and rows that control the layout of content in an HTML document.
  28. ab reposition themselves (horizontally or vertically) depending on the size of the screen.
  29. ac display:grid (or display:inline-grid), grid-columns, and grid-rows.
  30. ad display properly.
  31. ae «block-level» and «inline» elements.
  32. af 0.
  33. ag each item will take up two equal parts.
  34. ah flexbox can easily handle.
  35. ai either direction.
  36. aj Sets the flexbox as an inline-level element
  37. ak «display:inline-grid» CSS property. This creates the container for the layout.
  38. al ordered groups.
  39. am -moz- prefix.
  40. an grid structures. The size of columns and rows can be fixed or flexible.
  41. ao user interfaces.
  42. ap direction, whether left, right, up, or down.
  43. aq flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, flex-wrap
  44. ar flex-pack, flex-align
  45. as avoid unexpected results.
  46. at column.
  47. au control the height and width of flexbox items.
  48. av -ms-grid-columns: 150px auto 2fr;
  49. aw a keyword surrounded by dashes, to the front of a CSS3 property name.
  50. ax fit their content.
  51. ay styles applied to a parent also apply to a child.
  52. az good design.
  53. ba «width» or «height» property as the «preferred size».
  54. bb generic font families to prevent potential viewing problems across different browsers.
  55. bc modify the various parts of the box model.
  56. bd parent flexbox in your CSS code, and apply flex-align to the child items.
  57. be 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
  58. bf all output media.
  59. bg 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.
  60. bh fill the available space.
  61. bi The horizontal and vertical lines that divide columns or rows
  62. bj the CSS height and width property, such as 100px.
  63. bk more complex designs.
  64. bl div>div {
    width: flex(1 75px);
  65. bm text and images.
  66. bn «fr», so a row defined as «2fr» will be twice the size of a row defined as «1fr».
  67. bo row, row-reverse, column, and column-reverse values.
  68. bp height and width.
  69. bq the «flex-direction» and «flex-wrap» properties of a flexbox (the parent box) at the same time.
  70. br div {
    flex-wrap: wrap;
  71. bs 0 0 auto.
  72. bt the grid.
  73. bu box itself.
  74. bv surround content in an HTML document,
    whether the document becomes a Web page or a Web application.
  75. bw button or two to highly complex with many parts, and each part can contain one or more buttons, menus, toolbars, forms, and so on.
  76. bx toolbars, menus, forms, and similar elements in Web pages and applications
  77. by «child boxes».
  78. bz -ms-grid-rows: 50px 6em auto;
  79. ca it can be colored and have a pattern like a dashed line.
  80. cb news { grid-position: a; }
    weather { grid-position: b; }
    sports { grid-position: c; }
    events { grid-position: d; }
  81. cc -o- prefix.
  82. cd «block-level» elements.
  83. ce precise control over your layout, with a fraction of the CSS code as would be required using older techniques
  84. cf the flexible nature to child boxes.
  85. cg "one fraction."
  86. ch «flexorder» property.
  87. ci columns to make the design look cleaner and structured
  88. cj more boxes.
  89. ck scale or dynamically adjust their main size.
  90. cl margin, border, padding, and content.
  91. cm inline elements.
  92. cn flex-pack and flex-align (or flex-item-align) properties.
  93. co display:inline-flexbox
  94. cp The columns and rows of the grid; you define grid tracks using the grid-rows and grid-columns properties
  95. cq «column-reverse» (flex-flow: column-reverse;)
  96. cr empty table into which data can be flowed.
  97. cs -webkit- prefix.
  98. ct flex: pos-flex neg-flex preferred-size none
  99. cu columns or floats.
  100. cv «start», «end», «justify», or «center» (+«distribute»).
  101. cw -moz-flexbox property.
  102. cx adapt an HTML document to end-user devices.
  103. cy same time.
  104. cz absolute positioning.
  105. da nowrap, wrap, and wrap-reverse values.
  106. db 1.
  107. dc <style>
    div {
    display: flex;
    flex-flow: column;
  108. dd CSS specification to determine property inheritance.
  109. de grid items
  110. df appear in a layout, beginning with the lowest numbered group.
  111. dg height and width of flexbox items.
  112. dh «flexbox»
  113. di differently.
  114. dj more complex layouts.
  115. dk use a fancier font.
  116. dl child box.
  117. dm CSS Box model.
  118. dn div {
    grid-template: "abcd";
    grid-rows: auto;
    grid-columns: auto;
  119. do user interacts.
  120. dp values within parentheses.
  121. dq borders of the flexbox. You don't have to include an outline around flexboxes in your applications or Web pages.
  122. dr are still emerging.
  123. ds amount of code required for crossdevice compatibility.
  124. dt inappropriate overlapping of elements or elements appearing in the wrong places.
  125. du -ms- prefix.
  126. dv child box, which can be flexible or not.
  127. dw mobile Web applications and parts of Web pages in general.
  128. dx the border of the box and its content.
  129. dy the positive flex value.
  130. dz parts of a grid to a different area of a document.
  131. ea position of items in a grid.
  132. eb complex layouts than the flexbox model.
  133. ec layout of the document.
  134. ed disrupt the flow of the document.