Layout Flashcards
Create flex container
Two methods
Container behaves like a block: display: flex
Container behaves like an inline: display: inline-flex
What are the flex axes
- The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
- The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.
Axis start / end may change depending on direction. For instance, in arabic we use direction: rtl; (right-to-left), main-start of row will be on the right.
Set flex item direction
All possible values - explain
flex-direction: column;
* row
* row-reverse
* column
* column-reverse
Flex item wrapping options
All possible values - explain
flex-wrap: nowrap | wrap | wrap-reverse
Flex item sizing options.
- All possible values - explain
- What are the default values
- Shortcut
Defaults:
flex-grow: 0
* Items do not grow.
* Increase to grow faster.
flex-shrink: 1
* Items can shrink smaller than their flex-basis.
* Increase to shrink faster.
flex-basis: auto
* Items have a base size of auto (depends on the content).
* Set exact value (like 200px) to define exact base size.
Shortcut: flex <grow> <shrink> <basis>
Flex item alignment options on the main axis.
* All possible values - explain
* What are the default values
justify-content
* flex-start (default) and flex-end align all items at the start and end of the axis respectively.
* center
* space-between, which is very similar to space-around except that it doesn’t leave any space at either end.
* space-evenly
Flex item alignment options on the cross axis.
* All possible values - explain
* What are the default values
- Use
align-itemswhen you want to control the alignment of individual items in a single row or column.flex-startflex-endcenter-
baselineAlign to content inside the flex item. stretch
- Use
align-selfto override a flex item’salign-itemsvalue (only for one specific flex-item). Same values asalign-items - Use
align-contentwhen you have a multi-line container and want to control the spacing between rows.-
flex-start(default) andflex-endalign all items at the start and end of the axis respectively. center-
space-between, which is very similar tospace-aroundexcept that it doesn’t leave any space at either end. space-evenly
-
Grid:
* Set two columns with some specified px width.
* Set three equal columns (span entire area).
* Set two rows that will be as high as needed.
grid-template-columns: 100px 200px;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: auto auto;
Grid shortcut for definining columns or rows that are 1fr 2fr 1fr 2fr size.
repeat(2, 1fr 2fr)
Two Grid methods of putting as many as possible grid items, that are at least 150px and at most 1fr. Describe difference in behaviors.
repeat(auto-fit, minmax(150px, 1fr));
If you’re using auto-fit, the content will stretch to fill the entire row width.
repeat(auto-fill, minmax(150px, 1fr));
Whereas with auto-fill, the browser will allow empty columns to occupy space
What is the first line number in grid line numbering.
1
Place grid item on columns 1 and 2 and rows 2 and 3.
.item {
grid-column: 1 / 3; /* Span from column 1 to 3 */
grid-row: 2 / 4; /* Span from row 2 to 4 */
}Make grid item occupy 2 columns and 1 row (in it’s natural order)
.item-2 {
grid-column: span 2; /* Span 2 columns */
grid-row: span 1; /* Span 1 row */
}What are Grid areas, what are they used for.
```css
.container {
grid-template-areas:
“header header”
“sidebar content”
“footer footer”;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
~~~
What is Float, what are possible values.
The floated element is moved to the left or right and removed from normal flow.
-
left— Floats the element to the left. -
right— Floats the element to the right. -
none— Specifies no floating at all. This is the default value. -
inherit— Specifies that the value of the float property should be inherited from the element’s parent element.
img {
float: left;
}
What is display: flow-root;
- Floating element will be fixed inside article.
- Without it it would float in relation to entire page, so follow up elements would float around it as well (sometimes).
article {
display: flow-root;
}
Positioning:
* Parameters involved
* Possible position values, describe what they do (shortly)
- Position set with:
position: relative | absolute | fixed | sticky; - Offsets set with:
top,bottom,left, andright
They define a gap from specified direction, sotop: 30pxwill move the element30pxdown.
position: relative;
- Once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page.
position: absolute;
- The absolutely positioned element will be displayed outside of the <html> element and be positioned relative to the initial viewport.
- We can change the positioning context, that is, which element the absolutely positioned element is positioned relative to.
- This is done by setting positioning on one of the element’s ancestors.
position: fixed;
- Works like absolute positioning, but fixed positioning fixes an element in place relative to the visible portion of the viewport (not nearest positioned ancestor).
position: sticky;
- A hybrid between relative and fixed position.
- It allows a positioned element to act like it’s relatively positioned until it’s scrolled to a certain threshold (e.g., 10px from the top of the viewport), after which it becomes fixed.
How does z-index parameter work?
z-index values affect where positioned elements sit on that axis; positive values move them higher up the stack, negative values move them lower down the stack.
What is z-index stacking context?
- A stacking context is a group of elements that have a common parent and move up and down the z axis together.
- The
z-indexof elements inside of a stacking context are always relative to the parent’s current order in its own stacking context.
How to change z-index of an element in a normal flow?
In normal flow, if you set a specific value for z-index and it isn’t working, you need to set the element’s position value to anything other than static. This isn’t the case if you are in a flexbox or grid context, though, because you can modify the z-index of flex or grid items without adding position: relative.
