渭南房产网站制作,企业建站系统信息,展厅设计施工一体化,网站的运营模式文章目录Bootstrap中的Flexd-flex与d-inline-flex也存在响应式变化flex水平布局flex垂直布局flex水平与垂直也存在响应式变化内容排列#xff08;justify-content响应式变化也存在于这里sm#xff0c;md#xff0c;lg#xff0c;xl#xff09;子元素对齐方式Align itemsjustify-content响应式变化也存在于这里smmdlgxl子元素对齐方式Align items响应式变化也存在于这里smmdlgxl指定子元素对齐等宽扩展占用剩余空间排序换行其余方式详情查看总结Bootstrap中的Flex 弹性盒子是css3的一种布局方式更适合于响应式的开发 d-flex—创建flexbox容器并将子项转换为flex项d-inline-flex—创建行内flexbox容器
div classcontainer d-flex p-3 bg-infodiv classp-2弹性项目111/divdiv classp-2弹性项目222/divdiv classp-2弹箱项目333/div
/divd-flex与d-inline-flex也存在响应式变化
.d-sm-flex 屏幕宽度大于或者等于576px生效.d-sm-inline-flex.d-md-flex 屏幕宽度大于或等于768px生效.d-md-inline-flex.d-lg-flex 屏幕宽度大于或等于992px生效.d-lg-inline-flex.d-xl-flex 屏幕宽度大于或等于1200生效.d-xl-inline-flex
flex水平布局
.flex-row—来设置水平方向(浏览器的默认值).flex-row-reverse—来从相反的一侧开始水平方向。 div classcontainer d-flex p-3 bg-info flex-row-reversediv classp-2弹性项目111/divdiv classp-2弹性项目222/divdiv classp-2弹箱项目333/div
/divflex垂直布局
.flex-column—设置垂直方向.flex-column-reverse—从相反的方向开始设置垂直方向。
flex水平与垂直也存在响应式变化
.flex-sm-row 屏幕宽度大于或者等于576px生效.flex-sm-row-reverse.flex-sm-column 屏幕宽度大于或者等于576px生效.flex-sm-column-reverse (md,lg,xl)
内容排列justify-content响应式变化也存在于这里smmdlgxl 在flex容器上使用justify-content来更改flex item在主轴上的对齐方式(x轴为起始y轴为伸缩方向列)。选择 start (浏览器默认), end, center, between, 或者 around。 div classp-2 d-flex justify-content-start bg-info弹性项目111/divdiv classp-2 d-flex justify-content-end bg-warning弹性项目222/divdiv classp-2 d-flex justify-content-center bg-danger弹箱项目333/divdiv classp-2 d-flex justify-content-between bg-success弹性项目444/divdiv classp-2 d-flex justify-content-around bg-primary弹箱项目555/div子元素对齐方式Align items响应式变化也存在于这里smmdlgxl 在flexbox容器上使用align-items来更改伸缩项目在侧轴的对齐方式(y轴为起始x轴为伸缩方向:列)。选择start、end、center、baseline或stretch(浏览器默认) div class d-flex align-items-start bg-info弹性项目111/divdiv class d-flex align-items-end bg-warning弹性项目222/divdiv class d-flex align-items-center bg-danger弹箱项目333/divdiv class d-flex align-items-baseline bg-successp classbg-info弹箱项目444/p/divdiv classd-flex align-items-stretch bg-primaryp classbg-danger弹箱项目555/p/div指定子元素对齐 如果要设置指定子元素对齐对齐可以使用 .align-self- 类来控制 包含的值有.align-self-start,.align-self-end,.align-self-center, .align-self-baseline, 和.align-self-stretch(默认 div classcontainer mt-3p.align-self-start:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-startFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-end:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-endFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-center:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-centerFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-baseline:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-baselineFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-stretch (默认):/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-stretchFlex item 2/divdiv classp-2 borderFlex item 3/div/div/div等宽 .flex-fill 类强制设置各个弹性子元素的宽度是一样的: div classcontainer mt-3h2等宽/h2p.flex-fill 用于设置子元素等宽/pdiv classd-flexdiv classp-2 bg-info flex-fill111111111111111111/divdiv classp-2 bg-warning flex-fillFlex item 2/divdiv classp-2 bg-primary flex-fillFlex item 3/div/div/div扩展占用剩余空间 .flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间最后一个获取剩余空间。 : 在这里插入代码片 div classcontainer mt-3h2扩展/h2p.flex-grow-1 用于设置子元素使用剩下的空间/pdiv classd-flex mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 flex-grow-1 bg-primaryFlex item 3/div/divp不使用 .flex-grow-1 实例:/pdiv classd-flex mb-3 bg-secondarydiv classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/div/div排序 .order 类可以设置弹性子元素的排序从 .order-1 到 .order-12数字越低权重越高( .order-1 排在 .order-2 之前) : div classcontainer mt-3h2排序/h2p.order 类可以设置弹性子元素的排序从 .order-1 到 .order-12数字越低权重越高:/pdiv classd-flex mb-3div classp-2 order-3 bg-infoFlex item 1/divdiv classp-2 order-2 bg-warningFlex item 2/divdiv classp-2 order-1 bg-primaryFlex item 3/div/div/div换行 弹性容器中包裹子元素可以使用以下三个类 .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。 div classcontainer mt-3h2包裹/h2p弹性容器中包裹弹性子元素可以使用以下三个类 .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse:/ppcode.flex-wrap:/code/pdiv classd-flex flex-wrap bg-lightdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbrpcode.flex-wrap-reverse:/code/pdiv classd-flex flex-wrap-reverse bg-lightdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbrpcode.flex-nowrap:/code/pdiv classd-flex flex-nowrap bg-lightdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbr/div其余方式详情查看
总结
以上就是今天要讲的内容本文仅仅简单介绍了bootstrap中flex的使用并记录了常用的一些排列方式如果这篇文章不足以满足需求可以去官方文档查看详情
