CSS 中的 Flex 布局 完全指南7777

Flex 弹性盒子布局是很强大的布局，它可以很方便的控制元素在垂直和水平方向上的行为。

要使用 Flex，首选需要一个 Flex 容器（flex container）。使用display: flex;创建，flex 是一个 CSS 的display属性中新添加一个值，而容器下的每个子元素将成为 flex item（伸缩项目）。伸缩项目将参与到 flex 布局中，所有由 CSS Flexible Box Layout Module（CSS伸缩盒布局模型）定义的属性都能被它们使用。

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

主轴和交叉轴7777

容器存在两个轴，水平叫主轴（Main-Axis），垂直叫交叉轴（Cross-Axis）。主轴左边是开始位置（main start）右边是结束位置（main end），交叉轴上是开始位置（cross start）下是结束位置（cross end）。我们用 justify 属性控制主轴项目的空隙，使用 align 属性控制交叉轴项目之间的垂直行为。

容器的属性

容器一共有 6 个属性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。