Bootstrap4 Flex(弹性)布局
Bootstrap4是前端开发中常用的框架之一,其中的Flex布局是非常重要且常用的一个布局方式。要了解Bootstrap4的Flex布局,需要先了解什么是Flexbox。
Flexbox是CSS3中的新特性,是一种弹性盒布局模型,可以控制容器内各子元素的位置、大小、排列方式等属性。Bootstrap4中的Flex布局是使用了Flexbox来实现的。
Flex布局的基本概念:
Flex容器:应用Flexbox的容器元素。
Flex子元素:Flex容器内的子元素。
主轴:Flex容器的主要方向,可设置为水平方向(row)或垂直方向(column)。
交叉轴:与主轴垂直的方向。
Flex布局的最小要素为flex容器,将要应用弹性盒模型的元素的display属性设置为flex即可。以下是Bootstrap4中常见的Flex容器类:
- .d-flex:将display设置为flex。
- .d-inline-flex:将display设置为inline-flex。
Flex容器的属性:
- flex-direction:定义主轴的方向。
以下是可选值:
- row(默认值):水平方向从左往右排布。
- column:垂直方向从上往下排布。
- row-reverse:水平方向从右往左排布。
- column-reverse:垂直方向从下往上排布。
- flex-wrap:定义是否换行。
以下是可选值:
- nowrap(默认值):不换行。
- wrap:如果一行排不下,自动换行。
- wrap-reverse:换行,第一行在下方。
- justify-content:定义主轴上的对齐方式。
以下是可选值:
- flex-start(默认值):左对齐。
- flex-end:右对齐。
- center:居中。
- space-between:两端对齐,项目之间的间隔相等。
- space-around:每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。
- align-items:定义交叉轴上的对齐方式。
以下是可选值:
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- align-content:多根轴线的对齐方式。
以下是可选值:
- stretch(默认值):轴线占满整个交叉轴。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔相等,轴线之间的间隔比轴线与边框的间隔大一倍。
Flex子元素的属性:
- order:定义子元素的排列顺序。
默认值为0。
- flex-grow:定义子元素的放大比例。
默认值为0,即不放大。
- flex-shrink:定义子元素的缩小比例。
默认值为1,即在空间不足时,等比例缩小。
- flex-basis:定义子元素在主轴方向上的初始尺寸。
默认值为auto,即由子元素自身决定。
- flex:设置子元素在弹性盒模型中的三个属性,依次为:flex-grow、flex-shrink、flex-basis。
可以通过这种方式同时设置三个属性,方便快捷。
以上是Bootstrap4中Flex布局的基本概念和部分属性,此外还有很多其他属性和方法。了解了这些基本概念和属性,就可以更有效地使用Bootstrap4的Flex布局来实现页面的布局和排版。