【Bootstrap5学习 day10】

Flex布局
弹性盒子是CSS3的一种新的布局模式,更适合响应式的设计
创建一个弹性盒子容器
使用d-flex类,创建flexbox容器并将直接子项转换为flex项

弹性项目1
弹性项目1
弹性项目1

在这里插入图片描述

使用d-inline-flex类创建行内flexbox容器

弹性项目1
弹性项目1
弹性项目1

在这里插入图片描述
水平方向
.flex-row可以设置弹性子元素水平显示,这是默认的。
使用.flex-row-reverse类用于设置右对齐显示,即与.flex-row方向相反。

弹性项目1
弹性项目1
弹性项目1

垂直方向
使用.flex-column垂直显示flex项目(彼此堆叠),或使用.flex-column-reverse反转垂直方向

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3

【Bootstrap5学习 day10】_第1张图片

在这里插入图片描述
换行
默认情况下,项目都排在一条线(又称“轴线”)上,flex-wrap属性定义,如果一条轴线排不下,如何换行?

  • flex-nowrap(默认):不换行。
    在这里插入图片描述

  • flex-wrap:换行,第一行在上方。
    在这里插入图片描述

  • flex-wrap-reverse:换行,第一行在下方。
    在这里插入图片描述

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3

对齐内容
使用.justify-content-*类可以改变弹性项目的对齐方式,*号允许的值有

  • start(默认)
    在这里插入图片描述

  • end
    在这里插入图片描述

  • center
    在这里插入图片描述

  • between
    在这里插入图片描述

  • around
    在这里插入图片描述

弹性项目1
弹性项目2
弹性项目3

使用.align-items-*控制单行弹性项目的垂直对齐方式,*号允许的值有

  • start
    【Bootstrap5学习 day10】_第2张图片

  • end
    【Bootstrap5学习 day10】_第3张图片

  • center
    【Bootstrap5学习 day10】_第4张图片

  • baseline
    【Bootstrap5学习 day10】_第5张图片

  • stretch(默认值)
    【Bootstrap5学习 day10】_第6张图片

弹性项目1
弹性项目2
弹性项目3

使用.align-content-*用于控制多行项目的对齐方式,*号允许的值有

  • start
    【Bootstrap5学习 day10】_第7张图片

  • end
    【Bootstrap5学习 day10】_第8张图片

  • center
    【Bootstrap5学习 day10】_第9张图片

  • between
    【Bootstrap5学习 day10】_第10张图片

  • around
    【Bootstrap5学习 day10】_第11张图片

  • stretch(默认值)
    【Bootstrap5学习 day10】_第12张图片

弹性项目1
弹性项目2
弹性项目3
弹性项目4
弹性项目5
弹性项目6
弹性项目7
弹性项目8
弹性项目9

顺序
使用order类可更改特定flex项的视觉顺序,其中最低的数字具有最高的优先级(order-1显示在order-2之前,以此类推)默认为0

弹性项目1
弹性项目2
弹性项目3

在这里插入图片描述

等宽
在flex项目上使用.flex-fill可强制它们等宽

弹性项目1
弹性项目2
弹性项目3

在这里插入图片描述

伸展
在flex项目上使用.flex-grow-1可占用多余的空间

弹性项目1
弹性项目2
弹性项目3

【Bootstrap5学习 day10】_第13张图片
指定子元素对齐
要指定子元素对齐可以使用.align-self-*类来控制,align-self-*属性允许单个项目有其他项目不一样的对齐方式

  • start
  • end
  • center
  • baseline
  • stretch(默认值)
弹性项目1
弹性项目2
弹性项目3

【Bootstrap5学习 day10】_第14张图片

响应式flex类
可以根据不同的设备设置flex类,从而实现页面响应式布局,*号可以的值有:sm, md, lg或xl,对应的是小型设备、中型设备、大型设备、超大型设备。

Flex布局练习(骰子模型)
目标效果:
【Bootstrap5学习 day10】_第15张图片
实现:




页面标题


 



 




最终呈现效果:
【Bootstrap5学习 day10】_第16张图片

你可能感兴趣的:(学习)