More CSS Flashcards
Name the four common elements of a webpage layout
Header
Navigational links
Various sections
Footer
Blank at the top that identifies the website
Header
Blank at the top or left side that present the main links for navigating the website
Navigational Links
Blank that include related content
Various sections
Blank at the bottom that contains contact information, copyright, author name, etc.
Footer
Some web pages use a blank, which uses a fixed-width container to envelop the web page contents. Ex: The figure below shows a web page at the top using a fixed layout where the entire contents fit inside 960px. Resizing the browser does not change the width of the web page contents.
fixed layout
A web page that uses a blank allows the page contents to fill the browser, sometimes by using percentages for widths. Ex: The figure below shows a web page at the bottom using a fluid layout where the contents always fit the browser’s width. Fluid layouts make better use of the available space than fixed layouts and do not produce a horizontal scroll bar when the browser is resized.
fluid layout
The blank is a CSS layout mode that provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes.
Flexible Box or flexbox
Many developers find the flexbox layout easier to use than blank elements when creating fluid layouts.
floating
A blank is an element that has the CSS property display set to flex to create a block-level flex container or inline-flex to create an inline flex container. Ex: <div style="display: flex">.
flex container
Flex containers hold blank
flex items
A flex item is a blank of a flex container that is positioned and sized according to various CSS flexbox properties.
child element
The blank property defines the direction of flex items within the container using values:
flex-direction
Name the flex-direction values
row (default)
row-reverse
column
column-reverse
The blank property defines the space between flex items. Ex: gap: 10px; puts a 10px gap between all items.
gap
The blank property justifies the flex items within the container using values:
justify-content
Name the justify-content values
flex-start (default)
flex-end
center
space-between
space-around
The blank property determines if or how flex items wrap onto multiple rows when the container is not wide enough to hold all items
flex-wrap
Name the flex-wrap values
nowrap (default)
wrap
wrap-reverse
A flex item’s width is determined by the combination of what three CSS properties
The flex-basis property
The flex-grow property
The flex-shrink property
Blank sets the initial length of a flex item. The values can be auto (the default), a percentage, or a length unit. The default value auto makes the flex item the same initial length as the content.
flex-basis property
Blank sets a proportion that determines how much of the available container space should be assigned to the item. The default is 0, meaning the size should be based on the item’s content.
Flex grow property
Blank sets a proportion that determines the item’s minimum size. The default is 1, meaning the size should shrink at the same rate as other items when the container width shrinks. A value of 0 means the item should not change sizes when the container width shrinks.
Flex shrink property
The shorthand property blank specifies flex-grow, flex-shrink, and flex-basis together. Ex: flex: 0 1 auto; is the same as flex-grow: 0; flex-shrink: 1; flex-basis: auto;.
flex
tags