CSS弹性盒子

  • A+
所属分类:Web前端
摘要

在响应式 Web 设计中,UI 布局必须适配不同尺寸的设备。
CSS3 引入了 Flexible Box,简称 flexbox(弹性盒子),它特别适合用来创建弹性的页面布局。
弹性布局以一种可预见的方式排列元素,使其适用于不同尺寸的设备。


CSS弹性盒子

介绍

在响应式 Web 设计中,UI 布局必须适配不同尺寸的设备。
CSS3 引入了 Flexible Box,简称 flexbox(弹性盒子),它特别适合用来创建弹性的页面布局。
弹性布局以一种可预见的方式排列元素,使其适用于不同尺寸的设备。

使用说明

在一个元素的 CSS 中添加display: flex; 该元素会变为flex容器,默认它的子元素会从左到右逐个排列,把flex容器设为一个列,它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis(主轴)。与主轴垂直的叫做 cross axis(交叉轴)。行的交叉轴是垂直的,列的交叉轴是水平的。

父元素属性

下面属性在父元素中设置,用于设置整个CSS弹性盒子的样式。

  1. flex-direction: row;属性可以设置子元素的排列方式,默认值是row。其他可选值包括:columnrow-reversecolumn-reverse
  2. justify-content: flex-start 可以更改 flex 子元素在主轴排列方式。
    1. center: flex 子元素排列在 flex 容器中间。
    2. flex-start:从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放,对于列是把项目都靠顶部放。
    3. flex-end:从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放,对于列是把项目都靠底部放。
    4. space-between:项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如,在行中第一个项目会紧贴着容器左侧,最后一个项目会紧贴着容器右侧,然后其他项目均匀排布。
    5. space-around:与space-between相似,但头尾两个项目不会紧贴容器边缘,空间会均匀分布在所有项目两边。
  3. align-items: stretch属性,可以用于在交叉轴调整 flex 子元素。对于行,它规定了项目在容器中应该靠上还是靠下,而对于列,就是靠左或靠右。
    1. flex-start:从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放,对于列是把项目都靠左放。
    2. flex-end:从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放,对于列是把项目都靠右放。
    3. center:把项目的位置调整到中间。对于行,垂直居中(项目上下方空间相等)。对于列,水平居中(项目左右方空间相等)。
    4. stretch:拉伸项目,填满 flex 容器。例如,排成行的项目从容器顶部拉伸到底部。
    5. baseline:基线对齐地排列。基线是字体相关的概念,可以认为字体坐落在基线上。
  4. flex-wrap: nowrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。换行方向的可选值有这些:
    1. nowrap:默认值,不换行。
    2. wrap:行从上到下排,列从左到右排。
    3. wrap-reverse:行从下到上排,列从右到左排。

子元素属性

下面属性在子元素中设置,用于设置CSS弹性盒子中指定某个盒子的样式。

  1. flex-shrink属性。使用之后,如果 flex 容器太小,该项目会自动缩小。当容器的宽度小于里面所有项目的宽度,项目就会自动压缩。接受number类型的值。数值越大,与其他项目相比会被压缩得更厉害。例如,如果一个项目的flex-shrink为 1 ,另一个项目flex-shrink为 3,那么 3 的那个与另一个相比会受到 3 倍压缩。
  2. flex-growflex-shrink相对。flex-shrink会在容器太小时对元素作出调整。相应地,flex-grow会在容器太大时对元素作出调整。如果一个项目flex-grow属性的值为 1,另一个flex-grow为 3,那么 3 的会比 1 的扩大三倍。
  3. flex-basis属性指定了项目在 CSS 进行flex-shrinkflex-grow调整前的初始大小。flex-basis属性的单位与其他 size 属性一致(px、em、%等)。如果值为auto,项目的大小依赖于自身内容
  4. 上面几个 flex 属性有一个简写方式。flex-growflex-shrinkflex-basis属性可以在flex中一同设置。例如,flex: 1 0 10px;会把项目属性设为flex-grow: 1; flex-shrink: 0; flex-basis: 10px;。属性的默认设置是flex: 0 1 auto;
  5. order属性告诉 CSS flex 容器里项目的顺序。默认情况下,项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数,可以使用负数。
  6. align-self属性允许你调整每个元素自己的对齐方式,而不是一次性设置全部项目。因为floatclearvertical-align等调整使用的属性都不能应用在 flex 子元素,所以这个属性显得十分有用。align-self的允许值与align-items一样,并且它会覆盖align-items的值。

搬运链接