Skip to Content

CSS布局-弹性盒子

Flexbox 是CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，可以快速实现元素的对齐、分布和空间分配：

弹性盒子核心：

  1. 父控子（亲父子）

    父盒子控制子盒子如何排列布局 父盒子称为容器，子盒子称为项目

  2. 主轴和交叉轴（侧轴）

    轴默认水平方向，交叉轴默认垂直方向，可以更改

容器（父盒子）属性

属性作用示例
display定义元素为 Flex 容器.container {display: flex; }
flex-wrap控制是否换行.container (flex-wrap: wrap; }
flex-direction定义主轴方向（项目排列方向）.container (flex-direction: row; }
justify-content定义主轴上的对齐方式（整体分布）.container [justify-content: center; }
align-items定义交叉轴上的对齐方式（单行时整体对齐）.container (align-items: center; }
align-content定义多行时交叉轴上的对齐方式 （仅当 flex-wrap: wrap 且内容换行时生效）.container (align-content: space-between; }

容器（父盒子）设置 display:flex; 可以让子盒子按照主轴方式排列。

  • 如果子元素有大小，则按照给定大小来显示。
  • 如果子元素没有大小，则拉伸充满父容器。
  • 若子元素总宽度超过容器宽度，默认会压缩子元素。

控制换行

flex-wrap 控制是否换行

属性值描述
nowrap不换行 ABCDEFGH（全部横向排列，可能被压缩）
wrap换行（第一行上方，第二行下方）
ABCD
EFGH
wrap-reverse翻转（了解即可）

主轴对齐方式

justify-content 定义主轴上的对齐方式

属性值描述示例
flex-start左对齐（默认）子元素靠左排列
flex-end右对齐子元素靠右排列
center居中对齐子元素居中
space-between两端对齐首个子元素放置于起点，末尾元素放置于终点
space-around项目两侧间隔相等每个子元素周围分配相同的空间
space-evenly项目间隔均匀分布每个子元素之间的间隔相等

主轴方向

flex-direction 定义主轴方向（改变主轴方向）

属性值描述
row默认值。子元素沿水平主轴（从左到右）挂列。
row-reverse子元素沿水平主轴反向排列（从右到左）。
column子元素沿垂直主轴（从上到下）排列。
column-reverse子元素沿垂直主轴反向排列（从下到上）。

交叉轴对齐方式（单行）

align-items 定义交叉轴上的对齐方式（单行时整体对齐）

属性值描述
flex-start项目在交叉抽起点对齐（默认值）
flex-end项目在交叉轴终点对齐
center项目在交叉轴居中对齐
stretch项目拉伸填充整个容器高度（需子项目无固定高度）

交叉轴对齐方式（多行）

align-content 定义多行时交叉轴上的对齐方式（仅当 flex-wrap: wrap 且内容换行时生效）

开发中大部分情况下，该属性使用较少，大部分子元素顺序排列即可。

属性值描述示例
flex-start上对齐子元素靠上排列
flex-end下对齐子元素靠下排列
center居中对齐子元素居中
space-between两端对齐首个子元素放置于起点，末尾元素放置于终点
space-around项目两侧间隔相等每个子元素周围分配相同的空间
space-evenly项目间隔均匀分布每个子元素之间的间隔相等

间距

gap 简写属性用于设置行与列之间的间隙（间距）

/* 行和列之间保持20像素间隙。 */
gap: 20px;
 
/* 行间距是20像素，列间距是30像素。 */
gap: 20px 30px;

项目（子盒子）属性

子元素的属性用于控制自身的尺寸、顺序或对齐方式

属性描述示例`
flex-grow定义子元素剩余空间分配放大比例
（默认 0，即不放大）		.item (flex-grow: 1;}
flex-shrink定义子元素剩余空间分配缩小比例
（默认1，空间不足时等比缩小，0为不缩小）		.item (flex-shrink: 0; )
flex-basis定义项目在轴方向上的初始大小
（默认auto，优先级高于 width/height）		.item (flex-basis: 200px; }
flexflex-grow, flex-shrink, flex-basis 的简写
flex: 1，1 1 0%（等比放大/收缩，初始无基准尺寸）
flex: 2，2 1 0%（等比放大/收缩，初始无基准尺寸）		.item (flex: 1;)
align-self覆盖容器的 align-items，单独定义某个项目的交叉轴对齐方式.item ( align-self: center; }
order定义项目的排列顺序（默认 0，数值越小越靠前）.item (order: - 1; }
Last updated on