CSS Flexbox的实际用法详解

2021-03-18 04:10 jianzhan

Flexbox是1个强劲而灵便的合理布局,本篇文章内容关键对其开展学习培训掌握。

1、Flexbox简介

Flexbox合理布局(Flexible Box)控制模块旨在出示1个更为合理的方法制订、调剂和遍布1个器皿里的新项目合理布局,即便她们的尺寸是未知或是动态性的。简易的了解,便是能够全自动调剂,测算元素在器皿室内空间中的尺寸,并开展合理有效的合理布局。

Flexbox合理布局中有两个关键的定义:Flex器皿和Flex新项目。

Flex器皿包括好几个Flex新项目,根据对Flex器皿和Flex新项目的实际特性开展设定,能够做到各种各样各种各样灵便的合理布局款式。

Flexbox应用

Flexbox的应用十分简易,只必须对Flex器皿设定display:flex或display:inline-flex,便可以实际实际操作应用Flexbox合理布局了。

下面以实际示例演试:

html编码

<div class="container">
        <div class="wrap">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

css编码

.container {
    width: 70%;
    height: 500px;
    margin:20px auto;
    border: 1px solid black;
}
.container .wrap {
    display: flex;
    border: 3px solid #a448cf;
    margin:20px;
    width:80%;
    height:80%  
}
.container .wrap div {
    width:150px;
    height:150px;
    background-color: #c75a5a;
    margin:10px;
}

 

2、Flex器皿

最先详细介绍下Flex器皿的实际特性和实际的应用方法。

特性 值 含意 flex-direction row || column || row-reverse || column-reverse 操纵Flex新项目沿着主轴(Main Axis)的排序方位 flex-wrap wrap || nowrap || wrap-reverse 操纵Flex新项目是不是换行显示信息 flex-flow row wrap|| row nowrap || column wrap || column nowrap 等 flex-direction和flex-wrap两个特性的组成速记特性 justify-content flex-start || flex-end || center || space-between || space-around 操纵 Flex新项目在Main-Axis上的对齐方法 align-items flex-start || flex-end || center || stretch || baseline 操纵Flex新项目在 Cross-Axis 对齐方法 align-content flex-start || flex-end || center || stretch 用于多行的Flex器皿,操纵Flex新项目在 Cross-Axis 对齐方法

1. flex-direction

flex-direction特性操纵Flex新项目沿着主轴(Main Axis)的排序方位,能够是行(水平)、列(竖直)或行和列的反方向。

默认设置状况下flex-direction的特性值是row,实际排序方法以下:

 

可是当flex-direction的特性值是column,对应的主轴就应当竖直向下。

实际运用示比如下:

 

2. flex-wrap

flex-wrap特性操纵Flex新项目是不是换行。默认设置状况下,Flex器皿会在1行內容纳全部的Flex新项目,由于flex-wrap特性的默认设置值是nowrap,也便是不换行。

实际运用示比如下:

 

在其中wrap-reverse表明Flex新项目在器皿中多行排序,只是方位是反的。

3. flex-flow

flex-flow是flex-direction和flex-wrap两个特性的速记特性。

实际已不解释,看下面示例便可:

4. justify-content

justify-content特性,操纵Flex新项目在全部Main-Axis上的对齐方法。

justify-content的默认设置特性值是flex-start。

 

space-between让flex新项目两边对齐。

space-around让每一个flex新项目具备同样的室内空间

5. align-items

align-items操纵Flex新项目在Cross-Axis对齐方法。

align-items的默认设置值是stretch,让全部的Flex新项目高宽比和Flex器皿高宽比1样,铺进行。

 

baseline

让全部flex新项目在Cross-Axis上沿着她们自身的基准线对齐。

在其中stretch和baseline在不设定实际高宽比值,才会如上主要表现,不然会显示信息固定不动的高宽比。

align-content特性与align-items功效同样,但是该特性只对于多行,对单行失效。

3、Flex新项目

接下来再次详细介绍Flex新项目的实际特性及应用方式。

特性 值 含意 order 标值 依据 order 值再次排列。从底到高。 flex-grow 0 || positive number 操纵Flex新项目在器皿有过剩的室内空间怎样变大 flex-shrink 0 || positive number 操纵Flex新项目在器皿 沒有附加室内空间又怎样变小 flex-basis auto || % || em || rem || px 特定Flex新项目的原始尺寸 align-self auto || flex-start || flex-end || center || baseline || stretch 操纵单独Flex新项目在 Cross-Axis 对齐方法

1. order

order容许Flex新项目在1个Flex器皿中再次排列,特性默认设置值是0。

根据order值的尺寸开展排列,依照值从低到高先后排列。

默认设置状况下,排列以下:

 

当将方块1设定order:1后,排列以下:

 

假如,好几个Flex新项目具备同样的order值,Flex新项目再次排列是根据HTML源文档的部位开展排列。

以下所示,将方块1和方块2都设定为order:1。

2. flex-grow 和 flex-shrink

flex-grow和flex-shrink特性操纵Flex新项目在器皿有过剩的室内空间怎样变大(拓展),在沒有附加室内空间又怎样变小。

flex-grow和flex-shrink 的值能够为 0或超过0的任何正数。

默认设置状况下,flex-grow特性值设定为0,表明Flex新项目不容易提高,填充Flex器皿能用室内空间。

默认设置状况下,flex-shrink特性值设定为1,表明Flex新项目会变小,融入显示屏宽度。

假如把flex-grow的值设定为1,以下所示:

当好几个flex新项目在1行内,即不换行时,设定不一样的flex-grow和flex-shrink 值,对应的室内空间分派也不一样。 

flex-grow

将每个item所设定的 grow 所有加起来,得到能用室内空间,随后除以总的grow值,获得企业分派室内空间。

依据每个item 设定的 grow 来算,假如1个item 的grow 为 6,那末 这个 item 在主轴上的规格就必须拓宽 6*企业分派室内空间的尺寸。

flex-shrink

先将全部新项目 依照 flex-shrink * item-size 的方法加起来 获得1个加权和,随后测算出 每份 item 的 shrink占比: shrink占比 = flex-shrink * item-size / 以前的总和。最终每个item 减去这个 shrink占比 * 负能用室内空间。

在flex新项目有min-width(height)和max-width(height)时,对应的新项目要考虑到左右限值,把剩下的伸缩值分派给别的新项目。

3. flex-basis

flex-basis特定了 flex 元素在主轴方位上的原始尺寸,即决策了 flex新项目內容的宽或高(取决于主轴的方位)的规格尺寸。

默认设置状况,Flex新项目的原始宽度由flex-basis的默认设置值决策,即:flex-basis: auto。Flex新项目宽度的测算是根据內容的是多少来全自动测算。

flex-basis和width/height有1定的优先选择级,实际标准以下:

  1. flex-basis 的优先选择级比 width/height 非auto高
  2. width/height auto优先选择级等于 flex-basis,取二者中的最大值。

4. align-self

align-self 操纵单独新项目沿着Cross-Axis的对其方法。

 

除auto以外,上述示例中flex器皿设定了align-itmes:center。

auto 是将总体目标flex新项目的值设定为父元素的 align-items值,或假如该元素沒有父元素的话,就设定为 stretch。上述示例中align-items:stretch。

4、总结

以上是对flexbox的总体详细介绍,能够看出其强劲与灵便。除此以外,flexbox也有许多别的的特点和难题,这里就已不详细介绍。期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。