flex属于bootstrap吗

WBOY
Libérer: 2022-08-22 16:54:56
original
1877 人浏览过

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
Copier après la connexion

示例如下:




  Bootstrap 实例
  
  
  
  
  
  

Flex

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

Flex item 1
Flex item 2
Flex item 3
Copier après la connexion

输出结果:

19.png

相关推荐:bootstrap教程

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!