flex布局
发表更新前端 / CSS10 分钟读完 (大约1482个字)

flex布局

CSSflex弹性盒

弹性盒子概念

基本概念

  • Flex容器（flex container）：采用Flex布局的元素的父元素；
  • Flex项目（flex item）：采用Flex布局容器里面的子元素；
  • 主轴（cross axis）：触发弹性盒子之后，项目的排列方向
  • 侧轴 （main axis）：触发弹性盒子之后，与主轴对立的方向

注意：角触发弹性盒子之后，项目默认沿主轴排列。

触发弹性盒子

1
display:flex;

触发弹性盒之后的特点

  1. 父元素触发弹性盒子之后，子元素默认横向显示
    • 父元素触发弹性盒子之后，子元素会横向显示，类似浮动但是和浮动没有关系
    • 变化的效果不会影响孙子辈元素
  2. 触发弹性盒子之后，会改变子元素的元素类型，会让子元素变成块级元素
  3. 触发弹性盒子之后，如果只有一个子元素，给子元素添加margin:auto的时候，子元素会位于水平垂直居中位置显示

容器属性

修改主轴方向flex-direction

1
2
3
4
5
6
7
8
//默认值
flex-direction: row;
//横向反序排列
flex-direction: row-reverse;
//纵向排列
flex-direction: column;
//纵向反序排列
flex-direction:  column-reverse;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

主轴对齐方式justify-content

1
justify-content：flex-start；

主轴的默认对齐方式是flex-start

flex-start

1
2
3
4
5
6
7
8
9
10
11
12
//末端对齐
justify-content：flex-end；
//居中对齐
justify-content：center；
//两端对齐
justify-content：space-between；
//两端对齐
justify-content：space-between；
//环绕对齐：贴边空白是项目之间空白的1/2
justify-content：space-around；
//间距均分
justify-content：space-evenly；

flex-end

center

space-between

space-around

space-evnely

侧轴对齐方式align-items

1
align-items:flex-start

侧轴的默认对齐方式是flex-start

flex-start

1
2
3
4
5
6
7
8
//底部显示
align-items:flex-end
//居中显示
align-items:center
//baseline位于交叉轴基线位置（基本不使用）
align-items:baseline
//拉伸显示，项目没有指定高度时候生效
align-items:stretch

flex-end

折行属性flex-wrap

没有触发弹性盒子之前，子元素过多的时候，默认会产生溢出效果，元素有自己的宽度和高度

image-20241108151338308

当给父元素触发完弹性盒子之后display: flex子元素会横向显示，没有折行，并且原有宽度被挤压了

触发弹性盒子

1
2
3
4
//默认值不折行
flex-wrap:nowrap
//折行
flex-wrap：wrap

flex-wrap：wrap

  • 右侧有空白是因为右侧区域留白放不下一个项目了只能折行显示
  • 行之间空隙是因为项目设置了固定的高度，如果没有高度的话，高度默认是拉伸的效果，高度均分在
    每一行中

多行侧轴对齐align-content

1
2
3
4
5
6
7
8
9
10
11
12
//侧轴开始显示，没有行间距
align-content: flex-start
//侧轴结束显示，没有行间距
align-content: flex-end
//侧轴中间显示，没有行间距
align-content: center
//侧轴两端，上下两侧没有行间距
align-content: space-berween
//环绕对齐
align-content: space-around
//平分对齐
align-content: space-evenly

flex-start

felx-end

center

space-between

space-around

space-evenly

项目属性

单独侧轴对齐align-self

1
2
3
4
5
6
7
8
9
10
//侧轴开始位置对齐。默认值
align-self: flex-start
//侧轴结束位置对齐
align-self: flex-end
//侧轴开始位置对齐
align-self: center
//侧轴开始位置对齐
align-self: flex-baseline
//默认拉伸
align-self: stretch

侧轴对齐

调整显示顺序order

默认order取值为：auto；可以理解成o；
1)元素添加，order:5；位于最后显示
5）元素添加，order:-1；位于最前面显示

order

占剩余空间的所有flex:

  1. 主轴在横向的时候
    • 如果项目不设置高度的话，默认高度是拉伸的
    • 项目添加flex:1实现的是占剩余宽度的所有
  2. 主轴在纵向的时候
  • 如果项目不设置宽度的话，默认宽度是拉伸的
  • 项目添加flex:1实现的是占剩余高度的所有

2：flex：1

所有项目都是flex:1则所有项目平分

不挤压不占行

  1. flex属性是一个复合属性是由：flex-grow、flex-shrink、flex-basis三个属性的缩写。
  2. flex-grow：定义项目的的放大比例;
    默认为0，即使存在剩余空间，也不会放大；
    所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
    flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
  3. flex-basis：定义在分配多余空间之前，项目占据的主轴空间（mainsize）
    浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值，默认值为autt
  4. flex-shrink:定义项目的缩小比例
    取值为0/1
1
2
3
4
//不挤压，不折行
flex-shrink:0
//挤压
flex-shrink:1
#
关注我

最新文章

分类

×