图文并茂！为你展示Flex布局

文章目录

css Flex布局
决定容器内的排列方向
- flex-direction：row
- flex-direction：row-reverse
- flex-direction：column
- flex-direction：column-reverse
决定容器内如何换行
- flex-wrap：nowrap
- flex-wrap：wrap
- flex-wrap：wrap-reverse
排列方向及换行方式简写
- flex-flow：row nowrap
决定容器内的对齐方式：X轴
- justify-content：flex-start
- justify-content：flex-end
- justify-content：center
- justify-content：space-between
- justify-content：space-around
决定容器内的对齐方式：Y轴
- align-items：stretch
- align-items：flex-start
- align-items：flex-end
- align-items：center
- align-items：baseline
决定容器内的对齐方式：XY轴
- align-content：stretch
- align-content：flex-start
- align-content：flex-end
- align-content：center
- align-content：space-between
- align-content：space-around
定义单个子项目的属性
- 排列顺序：order
- 放大比例：flex-grow
- 缩小比例：flex-shrink
- 初始大小：flex-basis
- 缩放比例及初始大小简写：flex
- 对齐方式：align-self
参考链接
- Flex布局教程：语法篇

css Flex布局

决定容器内的排列方向

flex-direction：row

在X轴方向排列，起点在左端

flex-direction：row-reverse

在X轴方向排列，起点在右端

flex-direction：column

在Y轴方向排列，起点在上沿

flex-direction：column-reverse

在Y轴方向排列，起点在下沿

决定容器内如何换行

flex-wrap：nowrap

如果一条轴线排列不下，不换行

flex-wrap：wrap

如果一条轴线排列不下，换行且第一行在上方

flex-wrap：wrap-reverse

如果一条轴线排列不下，换行且第一行在下方

排列方向及换行方式简写

flex-flow：row nowrap

flex-direction属性和flex-wrap属性的简写形式：flex-flow: <flex-direction> <flex-wrap>;

决定容器内的对齐方式：X轴

justify-content：flex-start

在X轴方向上，左对齐

justify-content：flex-end

在X轴方向上，右对齐

justify-content：center

在X轴方向上，居中对齐

justify-content：space-between

在X轴方向上，两端对齐，子项目之间的间隔都相等

justify-content：space-around

在X轴方向上，每个子项目两侧的间隔相等，子项目之间的间隔会比子项目与边框的间隔大一倍

决定容器内的对齐方式：Y轴

align-items：stretch

在Y轴方向上，如果子项目未设置高度或设为auto，将占满整个容器的高度

align-items：flex-start

在Y轴方向上，与上沿对齐

align-items：flex-end

在Y轴方向上，与下沿对齐

align-items：center

在Y轴方向上，居中对齐

align-items：baseline

与子项目的第一行文字的基线对齐

决定容器内的对齐方式：XY轴

定义整个项目在多行排列或多列排列时的对齐方式

如果整个项目只排满一行或一列，则该属性不起作用

align-content：stretch

flex-flow: row wrap：所有子项目在X轴优先排满
align-content：stretch：整个项目在Y轴方向上自动拉伸

flex-flow: column wrap：所有子项目在Y轴优先排满
align-content：stretch：整个项目在X轴方向上自动拉伸

align-content：flex-start

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：flex-start：整个项目在Y轴方向上与上沿对齐

flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：flex-start：整个项目在X轴方向上左对齐

align-content：flex-end

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：flex-end：整个项目在Y轴方向上与下沿对齐

flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：flex-end：整个项目在X轴方向上右对齐

align-content：center

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：center：整个项目在Y轴方向上居中对齐

flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：center：整个项目在X轴方向上居中对齐

align-content：space-between

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：space-between：整个项目在Y轴方向上两端对齐

flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：space-between：整个项目在X轴方向上两端对齐

align-content：space-around

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：space-around：整个项目在Y轴方向上两侧间隔相等

flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：space-around：整个项目在X轴方向上两侧间隔相等

定义单个子项目的属性

排列顺序：order

属性数值越小，排列越靠前，默认值为0

放大比例：flex-grow

默认值为0：即使存在剩余空间，也不放大
如果所有子项目的flex-grow都为1，则它们将等分剩余空间

如果一个子项目的flex-grow为2，其余为1，则前者占据的剩余空间是其他子项目的一倍

缩小比例：flex-shrink

默认值为1，即如果空间不足，该子项目将缩小；负值对该属性无效

如果所有子项目的flex-shrink都为1，当剩余空间不足时，都将等比例缩小

如果一个子项目的flex-shrink为0，其余为1，则空间不足时，前者不缩小

初始大小：flex-basis

该属性定义在分配多余空间之前，子项目占据的空间。

浏览器根据该属性计算是否有多余空间。它的默认值为auto，即子项目内容的大小

缩放比例及初始大小简写：flex

flex 属性是flex-grow、flex-shrink和flex-basis的简写，默认值 0 1 auto；后两个属性为可选值

flex 属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）

建议优先使用该属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

对齐方式：align-self

align-self 属性允许单个子项目有与其他子项目不一样的对齐方式，可覆盖align-items属性

align-self 属性默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch

参考链接

Flex布局教程：语法篇