弹性盒⼦html

⼀、Flex 布局是什么？

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

是css中的⼜⼀种布局⼿段，它主要⽤来代替浮动来完成⻚⾯的布局

flex可以使元素具有弹性，让元素可以根据⻚⾯的⼤⼩的改变⽽改变

弹性容器

-要使⽤弹性盒，必须先将⼀个元素设置为弹性容器 -通过display来设置弹性容器 display:flex 设置块级弹性容器 display:inline-flex 设置为⾏内的弹性容器

弹性元素

-弹性容器的直接⼦元素是弹性元素（弹性项） 注意：⼀个元素可以同时是弹性容器和弹性元素 设置⽗元素flex后，⼦元素上的浮动，vertical-alin将失效 总结：通过设置⽗元素的弹性布局，调整⼦元素的对⻬⽅式和布局

//块元素
2 .box{
3 display: flex;
4 }
5 //⾏内元素
6 span{
7 display: inline-flex;
8 }

⼆、基本概念

容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置 （与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start， 结束位置叫做cross end。 项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

flex-direction  决定主轴的⽅向 （即项⽬的排列⽅ 向） row（默认 值）：主轴为⽔ 平⽅向，起点在 左端。 row-reverse： 主轴为⽔平⽅ 向，起点在右 端。 column：主轴为 垂直⽅向，起点 在上沿。 columnreverse：主轴为 垂直⽅向，起点 在下沿。 1. 1.

flex-wrap 决定如果⼀条轴线 排不下，是否换⾏ nowrap（默 认）：不换⾏。 wrap：换⾏，第 ⼀⾏在上⽅。 wrap-reverse： 换⾏，第⼀⾏在 下⽅。

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

justify-content 定义了项⽬在主轴 上的对⻬⽅式（必 须要先确定好主轴 是哪个） flex-start（默认 值）：左对⻬ flex-end：右对 ⻬ center： 居中 spacebetween：两端 对⻬，项⽬之间 的间隔都相等。 space-around： 每个项⽬两侧的 间隔相等。所 以，项⽬之间的 间隔⽐项⽬与边 框的间隔⼤⼀ 倍。 spaceevenly:项⽬是 分布的，以便 任何两个项⽬ 之间的间距 （和边缘的空 间）相等。

align-items 定义项⽬在交叉轴 （侧轴）上如何对 ⻬。 flex-start：交叉 轴的起点对⻬。 flex-end：交叉

注意：该属性是控 制⼦项在侧轴（默 认是y轴）上的排 列⽅式，在⼦项上 为单项（单⾏）的 时候使⽤ 轴的终点对⻬。 center：交叉轴 的中点对⻬。 baseline: 项⽬的 第⼀⾏⽂字的基 线对⻬。 stretch（默认 值）：如果项⽬ 未设置⾼度或设 为auto，将占满 整个容器的⾼ 度。

align-content 定义了多根轴线的 对⻬⽅式（⼦项出 现换⾏的情况） 如果项⽬只有⼀根 轴线，该属性不起 作⽤。 flex-start：与交 叉轴的起点对 ⻬。 flex-end：与交 叉轴的终点对 ⻬。 center：与交叉 轴的中点对⻬。 spacebetween：与交 叉轴两端对⻬， 轴线之间的间隔 平均分布。 space-around： 每根轴线两侧的 间隔都相等。所 以，轴线之间的 间隔⽐轴线与边 框的间隔⼤⼀ 倍。 stretch（默认 值）：轴线占满 整个交叉轴。