本文详细介绍了Flex布局的基本概念，包括容器的主轴、交叉轴以及项目在轴上的排列方式。讨论了容器的六大属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，分别涉及主轴方向、换行方式、轴线对齐等。此外，还提到了项目属性，如order、flex-grow、flex-shrink、flex-basis、flex和align-self，帮助理解项目在Flex布局中的行为。
基本概念
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
- main start/main end：主轴开始位置/结束位置；
- cross start/cross end：交叉轴开始位置/结束位置；
- main size/cross size：单个项目占据主轴/交叉轴的空间
容器属性
设置在容器上的属性有6种。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-item
- align-content
flex-direction属性
决定主轴的方向（即项目的排列方向）
- row（默认）：主轴水平方向，起点在左端；
- row-reverse：主轴水平方向，起点在右端；
- column：主轴垂直方向，起点在上边沿；
- colum
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
