CSS Flexbox 学习笔记与资源分享(全英第一次学Flexbox, 笔记大部分是基于CSS tricks和自己的理

刚接触前端不久, 第一次学Flexbox, 笔记大部分是基于CSS tricks和自己的理解, Copy and paste居多

收集了几个不错的学习资源, 建议直接看这些, 就不必看我的笔记

可以玩玩YT视频下的Codepen类似playground有基本框架, 学起来省事儿

因为刚学完之后有更深的理解再回来补充(🙂‍↔️😥太菜了

之后有时间再回来讲讲我认为容易混淆的地方

Resources

video demo: YouTube, more detailed one: YouTube

great image demo: Digit Ocean

notes is based on CSS tricks

supplementary website: W3C, Internet is hard,

MDN which have a detailed explanation of flex shorthand

Overview Structure

<div class="container">
  <div class="items"> </div>
  <div class="items"></div>
  <div class="items"></div>
</div>

.container {
	display: flex;
}
. items {
	flex-direction: row; /* by default, row-reverse / colunm / column-reverse is optional */
	justify-content: flex-start; /* by default, flex-end / center / space-between / space-around / space-evenly is optional */
	flex:1;
	...
}

Key Concepts

Flex container (Parent) and flex items (children)

Main axis and cross axis

Properties

Properties for the Parent

1. `display: flex;` define a flex container, enable flex context for all direct children

2. `flex-direction:`establishes the main-axis and define the direction of the flex items

row (default): left to right in ltr; right to left in rtl
row-reverse: right to left in ltr; left to right in rtl
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top

3. `flex-wrap`:allow the items to wrap as needed with this property.

nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

4. `justify-content` : defines the alignment along the main axis

It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
It also exerts some control over the alignment of items when they overflow the line.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

flex-start (default): items are packed toward the start of the flex-direction.
flex-end: items are packed toward the end of the flex-direction.
start: items are packed toward the start of the writing-mode direction. (may not support in specific browser)
end: items are packed toward the end of the writing-mode direction. (may not support in specific browser)
left: items are packed toward left edge of the container (may not support in specific browser)
right: items are packed toward right edge of the container (may not support in specific browser)
center: items are centered along the line ___itemitemitem___
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line item___item___item
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. _item__item__item_
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal. _item_item_item_
two additional keywords can pair with these values: safe and unsafe. use safe...To make positioning safe

5. `align-items`: defines the default behavior for how flex items are laid out along the cross axis on the current line.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

stretch (default): stretch to fill the container (still respect min-width/max-width)
flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
The safe and unsafe modifier keywords helping prevent aligning elements such that the content becomes inaccessible.

6. `align-content`: aligns a flex container’s lines within when there is extra space in the cross-axis

Note: This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse).
A single-line flexible container (i.e. where flex-wrap is set to its default value, no-wrap) will not reflect align-content (using `align-items instead!)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

normal (default): items are packed in their default position as if no value was set.
flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.
flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
center: items centered in the container
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch: lines stretch to take up the remaining space
The safe and unsafe modifier keywords helping prevent aligning elements such that the content becomes inaccessible.

7. `gap, row-gap, column-gap`: explicitly controls the space between flex items.

It applies that spacing only between items not on the outer edges.

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

The behavior could be thought of as a minimum gutter, as if the gutter is bigger somehow (because of something like justify-content: space-between;) then the gap will only take effect if that space would end up smaller. It is not exclusively for flexbox, gap works in grid and multi-column layout as well.

Properties for the Children

1. `order`: controls the order in which they appear in the flex container

Items with the same order revert to source order
It may against the accessibility of the web page

2. `flex-grow`: (default 0) defines how much its item will grow or which item will grow when there still have extra space

accepts a unitless value that serves as a proportion
usage:
- If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.
- If one of the children has a value of 2, that child would take up twice as much of the space as either one of the others (or it will try, at least).
Negative numbers are invalid

3. `flex-shrink`: (default 1) defines how fast the item will shrink when the container is shrink

Negative numbers are invalid
zero numbers means its item refusing shrink!

4. `flex-basis`: defines the default size of an element before the remaining space is distributed

- It can be a length (e.g. 20%, 5rem, etc.) or a keyword. - The auto keyword means “look at my width or height property” - The content keyword means “size it based on the item’s content” this keyword isn’t well supported yet ??? - If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value.

5. `flex`: the shorthand for `flex-grow,` `flex-shrink` and `flex-basis` combined.

The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto ??? - but if you set it with a single number value, like flex: 5;, that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

It is recommended to use this shorthand property rather than set the individual properties.

6. `align-self`: allows the default alignment (or the one specified by `align-items`) to be overridden for individual flex items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

??? Note that float, clear and vertical-align have no effect on a flex item.

CSS Flexbox 学习笔记与资源分享(全英

Resources

Overview Structure

Key Concepts

Flex container (Parent) and flex items (children)

Main axis and cross axis

Properties

Properties for the Parent

1. display: flex; define a flex container, enable flex context for all direct children

2. flex-direction:establishes the main-axis and define the direction of the flex items

3. flex-wrap:allow the items to wrap as needed with this property.

4. justify-content : defines the alignment along the main axis

5. align-items: defines the default behavior for how flex items are laid out along the cross axis on the current line.

6. align-content: aligns a flex container’s lines within when there is extra space in the cross-axis

7. gap, row-gap, column-gap: explicitly controls the space between flex items.

Properties for the Children

1. order: controls the order in which they appear in the flex container

2. flex-grow: (default 0) defines how much its item will grow or which item will grow when there still have extra space

3. flex-shrink: (default 1) defines how fast the item will shrink when the container is shrink

4. flex-basis: defines the default size of an element before the remaining space is distributed

5. flex: the shorthand for flex-grow, flex-shrink and flex-basis combined.

6. align-self: allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.