跳至主要內容

CSS - flex布局

Kamimika...大约 3 分钟CSS布局CSS笔记

本文为作者的笔记,详见阮一峰的博客open in new window

主轴与交叉轴

主轴与交叉轴示意图
主轴与交叉轴示意图

父元素属性

> display

说明
flex块元素
inline-flex行内元素

> flex-direction:主轴方向

说明
row(默认)横向(→)
column纵向(↓)
row-reverse横向(←)
column-reverse纵向(↑)
flex-direction示意图
flex-direction示意图

> flex-wrap:换行

说明
nowrap(默认)禁止换行
wrap允许换行
wrap-reverse允许换行(反向)
flex-wrap示意图
flex-wrap示意图

> flex-flow:(flex-direction) (flex-wrap) 属性简写合并

> justify-content:主轴对齐方式

说明
flex-start(默认)首对齐
flex-end尾对齐
center居中
space-between两端对齐,项目间隔相等
spcae-around每个项目两侧间隔相等,项目与项目间隔为项目与边缘的两倍
space-evenly项目与项目、项目与边缘间隔均相等
justify-content示意图
justify-content示意图

> align-items:子元素交叉轴对齐方式

说明
flex-start起点对齐
flex-end终点对齐
center中心对齐
strech(默认)默认占满整个交叉轴
baseline文本基线对齐
align-items示意图
align-items示意图

> align-content:多主轴对齐方式

说明
flex-start与交叉轴起点对齐
flex-end与交叉轴终点对齐
cneter与交叉轴中心对齐
space-between与交叉轴两端对齐,轴线间隔相等
space-around每根轴线两侧间隔相等,轴线与轴线间隔为轴线与边缘的两倍
spcace-evenly每根轴线两侧间隔相等,轴线与轴线、轴线与边缘间隔相等
stretch轴线占满整个交叉轴
align-content示意图
align-content示意图

子元素属性

> order:排列顺序

默认值:0

> flex-grow:主轴空间剩余时的放大比例

默认值:0(不放大)

> flex-shrink:主轴空间不足时的缩小比例

默认值:1(会缩小)

> flex-basis:分配前占据的主轴空间

默认值:auto (元素自身大小)

> flex:(flex-grow) (flex-shrink) (flex-basis) 属性简写合并

默认值:0 1 auto 快捷值:

  • auto:1 1 auto
  • none: 0 0 auto

警告

flex: 1 不等于 flex: 1 1 auto 而等于 flex: 1 1 效果会有一些微妙的区别
flex: 0 等于 flex: 0 1 0
因此推荐使用flex: auto或和flex: none代替

> align-self:子元素自身的交叉轴对齐方式(align-items 属性)

属性值同align-items

总结整理

命名规则

前缀:

前缀规则类型
justify-主轴规则
align-交叉轴规则

后缀:

后缀规则类型
-items所有子元素规则
-content内容规则
-self单个子元素规则

注意事项

如果出现子元素溢出导致父元素扩大,使布局异常的情况,请使用width: 0;height: 0;flex-basis: 0;

.box {
  display: flex;
  width: 100%;
}

/* 伸缩并占满容器 */
.child1 {
  flex: 1;
  height: 0; /* 不要使用height: 100% */
}

/* 固定高度 */
.child2 {
  flex: 0;
}
上次编辑于:
贡献者: wzh656
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.3.0