前言

还有即将在国外投身秋招的小伙伴吗？本文是将在写大项目过程中用到的实践CSS技巧翻译成英文的笔记，给将要在国外面试和在国内想学习英文的小伙伴们都做个参考~

Combinators

• Descendant selector: matches all elements that are descendants of a specified element

  • div p {...}

• Child selector: selects all elements that are the direct children of a specified element. Will NOT match descendants that are not direct children.

  • div > p {...}

• Adjacent Sibling: select an element B that is directly after another element A. Sibling elements must have the same parent element, and "adjacent" means "immediately following", aka the first B that appears after A

  • div + p {...}

• General Sibling: selects all elements B that are next siblings of a specified element A. Will select all Bs on the same level as A, even if siblings do not follow immediately (aka, B is interleaved with other elements)

  • div ~ p {...}

Flexbox

• Helps you to make items auto-align in a certain direction, where their sizes will scale to respond to broswer size changes.

• Flexbox container properties

  • Keyword: display: flex, used in the flexbox container

  • Direction control: flex-direction: row/column

    • In row layout, the Main Axis is horizontal, Cross Axis is vertical
    • In column layout, the Main Axis is vertical, Cross Axis is Horizontal

  • Item alignment:

    • justify-content: Aligns items in the Main Axis
    • Align-items: Aligns items in the Cross Axis
    • flex-start (start of axis), center, space-between (all extra space is distributed inbetween items), space-around (also put extra space on each side of items), stretch (will stretch items to fill the axis, ignoring their original size)

• Flexbox item properties

  • flex-shrink:Controls how much items shrink when browser size decreases. 0 means item never shrinks

  • flex-grow: Controls growth. Takes all extra space the browser has when it expands, divides these extra space based on the ratio of flex-grows of items in the same container.

    • e.g. If item A has flex-grow: 1, item B has flex-grow : 2, then extra space will be divided into a 1:2 ratio between A and B, and added onto their original widths/heights

  • flex-basis: The basis on which to add/deduct space with flex-grow/shrink. This will override the original width/height of the element. If set to 0, items will imagine they have 0 size before dividing the extra browser space. The final effect is also determined by the ratio of flex-basis properties between flex items.

  • align-self: Overrides the flexbox container's align-items property, and allows you to control the Cross Axis alignment of an individual item

  • order: Specifies the order in which items appear in a flexbox

  • Short Hand: flex: grow shrink basis

• Reference: Youtube Video Learn Flexbox in 15 Miniutes

总结

• Combinators是在Selector之上的又一层调节法，大佬的码里用的非常多，面试肯定要考。
• Flexbox简单好用，大家不用再憨憨地用position去码了。Flexbox可以自动根据浏览器伸缩调节大小，代码也很简单，一行代码即可产生魔法效果~