FFC详解及应用

要使用 flexbox 布局，只需在父 HTML 元素上设置 display 属性

display: flex;

 或者你可以以内联样式的显示

display: inline-flex;

　

当在父容器上设置了display: flex;或者display: inline-flex;后，它的子元素都自动变成flex项

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

针对flex容器可以设置

针对flex项目

    flex-basis

flex-basis: number|auto|initial|inherit;

number: 一个长度单位或者一个百分比，规定灵活项目的初始长度。

auto: 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。

小技巧

1. 在flex布局中，margin: auto会吃掉每个方向上的剩余的空间，所以设置合适的margin可以达到一些特殊的效果，比如，给最后一个flex item设置flex-grow: 1会让它占用主轴上剩余的空间，配合text-align: right可以实现文字靠在最右侧的效果，但是使用margin-left: auto能更简单地实现上述效果。
3.