flex布局

原创已于 2025-05-03 08:57:25 修改 · 647 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#系统架构 #webpack #测试工具

于 2025-04-18 15:11:02 首次发布

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

/* 子元素-平均分栏 */
.flex1 {
-webkit-box-flex: 1; /* iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Spec - Opera 12.1, Firefox 20+ */
}

/*激活flex方式*/
display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
display: -moz-box; /* - Firefox 1 */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Chrome */
display: flex;

旧语法
.box{
display: -moz-box; /*Firefox*/
display: -webkit-box; /*Safari,Opera,Chrome*/
display: box;
}

容器属性
box-pack 属性定义子元素主轴对齐方式。
.box{
-moz-box-pack: center; /*Firefox*/
-webkit-box-pack: center; /*Safari,Opera,Chrome*/
box-pack: center;
}

box-pack属性总共有4个值

属性

start

end

center

justify

说明

左对齐（默认)

右对齐

居中对齐

左右对齐

box-align定义子元素交叉轴对齐方式
.box{
-moz-box-align: center; /*Firefox*/
-webkit-box-align: center; /*Safari,Opera,Chrome*/
box-align: center;
}

.
box-align属性总共有5个值

属性

start

end

center

baseline

stretch

说明

顶部对齐（默认）

底部对齐

居中对齐

文本基线对齐

上下对齐并铺满

box-direction定义子元素的显示方向
.box{
-moz-box-direction: reverse; /*Firefox*/
-webkit-box-direction: reverse; /*Safari,Opera,Chrome*/
box-direction: reverse;
}

box-direction属性总共有3个值

属性

normal

reverse

inherit

说明

默认方向

反方向

继承子元素的 box-direction

box-orient定义子元素是否应水平或垂直排列
.box{
-moz-box-orient: horizontal; /*Firefox*/
-webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
box-orient: horizontal;
}

box-orient属性总共有5个值

属性

horizontal

vertical

inline-axis

block-axis

inherit

说明

水平

垂直

行内方式排列（默认）

块方式排列

继承父级的box-orient

box-lines定义当子元素超出了容器是否允许子元素换行
.box{
-moz-box-lines: multiple; /*Firefox*/
-webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
box-lines: multiple;
}

box-lines属性总共有2个值

属性

single

multiple

说明

不允许（默认）

允许

子元素属性
box-flex定义是否允许当前子元素伸缩
.item{
-moz-box-flex: 1.0; /*Firefox*/
-webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
box-flex: 1.0;
}
box-flex属性使用一个浮点值：
.item{
box-flex: <value>;
/*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/
}

box-ordinal-group定义子元素的显示次序，数值越小越排前
.item{
-moz-box-ordinal-group: 1; /*Firefox*/
-webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
box-ordinal-group: 1;
}
box-direction属性使用一个整数值：
.item{
box-ordinal-group: <integer>;
/*显示次序：<一个整数，默认为1，数值越小越排前>*/
}

新版语法
定义容器的display属性
.box{
display: -webkit-flex; /*webkit*/
display: flex;
}

/*行内flex*/
.box{
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
}

容器的属性
flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。

属性值

含义

row（默认值）

主轴为水平方向，起点在左端。

row-reverse

主轴为水平方向。排列顺序与页面的文档顺序相反。

column

主轴为垂直方向。排列顺序为从上到下。

column-reverse

主轴为垂直方向。排列顺序为从下到上。

.box {
flex-direction: row | row-reverse | column | column-reverse;

/*浏览器兼容的flex语法*/
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row
}

flex-wrap属性的可选值及其含义
属性值

含义

nowrap（默认值）

容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。

wrap

当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。

wrap-reverse

与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下的时候以什么形式换行。

.box{/*它可能取三个值。*/
flex-wrap: nowrap | wrap | wrap-reverse;

/*不同浏览器的写法*/
-webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -o-flex-wrap: wrap;
   flex-wrap: wrap;
}

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
flex-flow: <flex-direction> || <flex-wrap>;
// <' flex-direction '>：定义弹性盒子元素的排列方向。
// <' flex-wrap '>：控制flex容器是单行或者多行。
-webkit-flex-flow:row nowrap;
   flex-flow:row nowrap;
   -webkit-flex-flow:row wrap-reverse;
   flex-flow:row wrap-reverse;
-webkit-flex-flow:column wrap-reverse;
   flex-flow:column wrap-reverse;
}

justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。有如下五种情况

.box {
justify-content: flex-start | flex-end | center | space-between | space-around|space-evenly;

    -webkit-justify-content: center;
   -moz-justify-content: center;
   -ms-justify-content: center;
   -o-justify-content: center;
   justify-content: center;
}

flex-start 左对齐

flex-end 右对齐

center 居中

space-between 两端对齐，项目之间的间隔都相等。

space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

space-evenly: 均匀排列每个元素,每个元素之间的间隔相等

lign-items属性
align-items属性定义项目在交叉轴上如何对齐。

属性值

含义

flex-start

条目与其所在行在交叉轴起始方向上的边界保持对齐。

flex-end

条目与其所在行在交叉轴结束方向上的边界保持对齐。

center

条目的空白边盒子（margin box）在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。

baseline

条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。

stretch

如果条目的交叉轴尺寸的计算值是"auto"，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。

.box {（主轴是横向才生效）
align-items: flex-start | flex-end | center | baseline | stretch;

-webkit-align-items: center;
   -moz-align-items: center;
   -ms-align-items: center;
   -o-align-items: center;
   align-items: center;
}

flex-start 交叉轴的起点对齐。

flex-end 交叉轴的终点对齐。

center 交叉轴的中点对齐。

baseline 项目的第一行文字的基线对齐。

stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

属性值

含义

flex-start

行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。

flex-end

行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。

center

行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。

space-between

行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。

space-around

类似于 space-between，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。

stretch

伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

-webkit-align-content:flex-start;
align-content:flex-start;
}

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

子元素属性
.item{
order: <integer>;
/*排序：数值越小，越排前，默认为0*/

flex-grow: <number>; /* default 0 */
/*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

flex-shrink: <number>; /* default 1 */
/*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/

flex-basis: <length> | auto; /* default auto */
/*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/

align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

兼容写法
定义容器的 display 属性：
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

子元素主轴对齐方式
.box{
box-pack: start | end | center | justify;
/*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/

justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
}

子元素交叉轴对齐方式
.box{
box-align: start | end | center | baseline | stretch;
/*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/

align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

子元素的显示方向
/*子元素的显示方向可通过 box-direction + box-orient + flex-direction 实现, box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式*/

.box{/*左到右*/
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}

.box{/*右到左*/
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}

.box{/*上到下*/
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}

.box{/*下到上*/
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}

.item{
box-flex: <value>;
/*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/

flex-grow: <number>; /* default 0 */
/*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

flex-shrink: <number>; /* default 1 */
/*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/
}

文章来源:https://ximaonetwork.cn