CSS - Flexbox总结

Flexbox

Flexbox是layout的一种方式, 对于控制single dimensional的layout来说, flexbox是很好的选择.

display: flex 放在parent上, flex的元素是children

Directions and Alignment

justify-content: 控制的是primary的axis元素的排列
align-items: 控制的是secondary的axis元素的排列

Alignment Tricks

Baseline alignment

nested flexbox

nav 使用了flexbox, nav的children ul 也使用了flexbox

Align self

在子元素中使用, 使其按照自定义的样式展示

Note: align-self是作用在secondary axis上的, 没有justify-self 因为在primary axis上有flex-grow, flex-shrink, flex-basis and order使用

Growing and Shrinking

知识点

1. flexbox有一个hypothetical size
2. 设置width就是这是了hypothetical size
3. flex-basis 跟设置width一样, 但是如果conflict, flex-basis win
4. flex-grow 设置子元素占满多余的空间
5. flex-shrink, 在minimum space前会缩小调.
6. flex-shrin: 0, 就是不让元素缩小

The flex Shorthand

flex takes 3 individual values:

• flex-grow, as a unitless value (eg. 1)
• flex-shrink, as a unitless value (eg. 5)
• flex-basis, as a length unit (eg. 200px)

1. By default, flex-grow 会占满整个元素空间
2. flex:1 就是 flex-grow: 1, flex-shrink: 1 and flex-basis: 0%

2012 dodge charger sxt 0 60

flex-basis: 0: 计算的是元素所有的空间
flex-basis: auto: 计算的是元素内的padding

Constraints

如果有需要限制最大尺寸的话可以用max-width or max-height

Shorthand Gotchas

要注意如果使用flex: 1, 这是设置width为0%, 如果需要设置min-width, 需要声明flex: 1 1 200px

Wrapping

如果需要有inline元素的line-wrap属性的话, 在flexbox中可以使用flex-wrap

Groups and Gaps

有点像margin, 这个是在flexbox中设置元素之间的距离

怎么解决三个元素其中一个left, 两个right

2012 dodge charger sxt 0 60

const Wrapper = styled.header`
  display: flex;
`;

const Logo = styled.a`
  margin-right: auto;
`;

Ordering

Flexbox提供调转order的方法, 但是这个只是visual order
row-reverse and column-reverse

还有
order 以及flex-wrap: wrap-reverse