首页  >  文章  >  web前端  >  flex属于bootstrap吗

flex属于bootstrap吗

WBOY
WBOY原创
2022-08-22 16:54:561858浏览

flex布局属于bootstrap;flex指的是弹性布局,bootstrap可以通过flex类来控制页面的布局,使用“.d-flex”和“.d-inline-flex”实现开启flex布局样式,能不能使用flex弹性布局也是bootstrap3和bootstrap4的最大区别。

flex属于bootstrap吗

本教程操作环境:Windows10系统、bootstrap5版、DELL G3电脑

flex属于bootstrap

Bootstrap4 通过 flex 类来控制页面的布局

Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。

  • 使用.d-flex和.d-inline-flex实现开启flex布局样式;

  • .flex-row可以呈现子元素水平方向的位置,默认居左并从左到右显示(1,2,3);

  • .flex-row-reverse子元素水平方向居右从左到右显示(3,2,1);

  • .flex-column 实现子元素垂直效果,并从上往下显示(1,2,3);

  • .flex-column-reverse实现子元素垂直效果,并从上往下显示(3,2,1);

  • .justify-content-start(end、center、between、around)实现内容对齐;

  • .align-items-start(end、center、baseline、stretch)实现项目对齐;

  • .align-self-start(end、center、baseline、stretch)实现单项目对齐;

示例如下:

1
2
3
1
2
3
1
2
3

示例如下:




  Bootstrap 实例
  
  
  
  
  
  


Flex

使用 d-flex 类创建一个弹性盒子容器,并设置三个弹性子元素:

Flex item 1
Flex item 2
Flex item 3

输出结果:

19.png

相关推荐:bootstrap教程

以上是flex属于bootstrap吗的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn