弹性盒⼦详解

目录

⼀、Flex 布局是什么？

二、基本概念  

三、容器的属性

flex-direction

flex-wrap

flex-flow

justify-content  

align-items

align-content

四、项⽬(弹性元素)的属性

order（*）

flex-grow

flex-shrink

flex-basis

flex（*）

练习

导航条

骰子练习

---

⼀、Flex 布局是什么？

flex( Flexible Box 弹性盒⼦，伸缩盒)

是css中的⼜⼀种布局⼿段，它主要⽤来代替浮动来完成⻚⾯的布局 ，flex可以使元素具有弹性，让元素可以根据⻚⾯的⼤⼩的改变⽽改变

弹性容器

-要使⽤弹性盒，必须先将⼀个元素设置为弹性容器

-通过display来设置弹性容器

display:flex 设置块级弹性容器

display:inline-flex 设置为⾏内的弹性容器

弹性元素

-弹性容器的 直接⼦元素 是弹性元素（弹性项）

注意：⼀个元素可以同时是弹性容器和弹性元素

设置⽗元素flex后，⼦元素上的浮动，vertical-alin将失效

总结：通过设置⽗元素的弹性布局，调整⼦元素的对⻬⽅式和布局

 //块元素
 .box{
 display: flex;
}
 //⾏内元素
 span{
 display: inline-flex;
}

二、基本概念  

容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与 边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

flex-direction

决定主轴的⽅向 （即项⽬的排列⽅ 向）

• row（默认值）： 主轴为⽔平⽅ 向，起点在左 端。
• row-reverse：主 轴为⽔平⽅向， 起点在右端。
• column：主轴为 垂直⽅向，起点 在上沿。
• column-reverse：主轴为 垂直⽅向，起点 在下沿。

flex-wrap

决定如果⼀条轴线 排不下，是否换⾏

• nowrap（默 认）：不换⾏。
• wrap：换⾏，第 ⼀⾏在上⽅。
• wrap-reverse： 换⾏，第⼀⾏在 下⽅。

flex-flow

是flex-direction属 性和flex-wrap属 性的简写形式，默 认值为row nowrap

||

;

justify-content  

定义了项⽬在 主轴 上的对⻬⽅式（必 须要先确定好主轴 是哪个）

• flex-start（默认 值）：左对⻬
• flex-end：右对⻬
• center： 居中
• space-between：两端对 ⻬，项⽬之间的 间隔都相等。
• space-around： 每个项⽬两侧的 间隔相等。所 以，项⽬之间的 间隔⽐项⽬与边 框的间隔⼤⼀ 倍。
• space-evenly: 项⽬是分布 的，以便任何 两个项⽬之间以下6个属性设置在项⽬上。 的间距（和边 缘的空间）相 等。

align-items

定义项⽬在交叉轴 （ 侧轴 ）上如何对 ⻬。

注意：该属性是控 制⼦项在侧轴（默 认是y轴）上的排 列⽅式，在⼦项上 为单项（单⾏）的

时候使⽤

• flex-start：交叉 轴的起点对⻬。
• flex-end：交叉轴 的终点对⻬。
• center：交叉轴的 中点对⻬。
• baseline: 项⽬的 第⼀⾏⽂字的基 线对⻬。
• stretch（默认 值）：如果项⽬ 未设置⾼度或设 为auto，将占满 整个容器的⾼ 度。

align-content

定义了多根轴线的 对⻬⽅式（⼦项出 现换⾏的情况） 如果项⽬只有⼀根 轴线，该属性不起 作⽤。

• flex-start：与交 叉轴的起点对 ⻬。
• flex-end：与交叉 轴的终点对⻬。
• center：与交叉轴 的中点对⻬。
• space-between：与交叉 轴两端对⻬，轴 线之间的间隔平 均分布。
• space-around： 每根轴线两侧的 间隔都相等。所 以，轴线之间的 间隔⽐轴线与边 框的间隔⼤⼀ 倍。
• stretch（默认 值）：轴线占满 整个交叉轴。

四、项⽬(弹性元素)的属性

order（*）

定义项⽬的排列顺 序。数值越⼩，排 列越靠前，默认为 0

注意：z-index的 区别

 .item {
 order:
;

 }

flex-grow

定义项⽬的放⼤⽐ 例，默认为0，即 如果存在剩余空 间，也不放⼤。

 .item {
 flexgrow:
;
/*
default 0
*/

 }

flex-shrink

定义了项⽬的缩⼩ ⽐例，默认为1，即如果空间不⾜， 该项⽬将缩⼩。

 .item {
 flexshrink:
;
/*
default 1
*/

 }

flex-basis

定义了在分配多余 空间之前，项⽬占 据的主轴空间 （main size）。浏 览器根据这个属 性，计算主轴是否 有多余空间。它的

默认值为auto，即 项⽬的本来⼤⼩。

 .item {
 flexbasis:

 auto;

default
auto 
 }

flex（*）

flex属性是flexgrow, flex-shrink 和 flex-basis的简 写，默认值为0 1 auto。后两个属性 可选。

定义了⼦项⽬分配 剩余空间 ，flex表 示占 多少份数

align-self（*）

允许单个项⽬有与 其他项⽬不⼀样的 对⻬⽅式，可覆盖 align-items属性。 默认值为auto，表 示继承⽗元素的 align-items属性。

.item {
 alignself:
auto |
flex-start |
flex-end
| center
|
baseline
| stretch;

3}

练习

导航条

    
    
    
    
    
    



    

        

            HTML/CSS
        
        

            Browser Side
        
        

            Server Side
        
        

            programming
        
        

            xml
        
        

            web building
        
        

            reference
        

    

骰子练习