弹性盒模型，FLEX

Posted 2020-12-10 guoguocode

一、兼容性

1、各浏览器最新版本都已支持，除了IE 10 / UC , IE 11 已经支持。

//Internet Explorer 10： 使用 -ms- 前缀；
//UC浏览器：              使用 -webkit- 前缀。

2、兼容更老版本的写法

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

 

二、基本语法

1、声明

display:flex         //水平伸缩
display:inline-flex  //行内盒竖直伸缩

2、改变排列方向（主轴方向）

flex-direction:row               //从左向右排列，主轴水平向右
flex-direction:row-reverse       //从右向左排列，主轴水平向左
flex-direction:column            //从上向下排列，主轴竖直向下，交叉轴水平
flex-direction:column-reverse    //从下向上排列，主轴竖直向上

3、控制弹性元素溢出换行处理

flex-wrap:warp          //此属性后，元素便不会自动伸缩，而是向下换行
flex-wrap:wrap-reverse  //先排满下面一行，再往上排（竖直排列同理）

4、元素排列方向与换行组合定义

flex-flow:row wrap      //flex-flow更常用。先设置主轴方向，再设置换行方向

5、设置主轴上的元素排列方式

justify-content:flex-start           // 从主轴起始点开始排列
justify-content:flex-end             // 从主轴终止点开始排列
justify-content:flex-end             // 紧挨着放置在主轴中间
justify-content:space-between        // 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
justify-content:space-around         // 均匀排列每个元素，每个元素两侧分配相同的空间
justify-content:space-evenly         // 均匀排列每个元素，每个元素之间的间隔相等，视觉上真正的均匀

6、设置交叉轴上的元素排列方式

align-items:flex-start           // 从交叉轴起始点开始排列
align-items:flex-end             // 从交叉轴终止点开始排列
align-items:center               // 紧挨着放置在交叉轴中间
align-items:stretch              // 从交叉轴起始点开始排列，占满整个主轴

 7、多行元素在交叉轴上的排列方式（首先：flex-wrap:wrap）

align-content:flex-start           // 从交叉轴起始点开始排列
align-content:flex-end             // 从交叉轴终止点开始排列
align-content:center               // 紧挨着放置在交叉轴中间
align-content:space-between        // 均匀分布项目,第一项与起始点齐平，最后一项与终止点齐平 
align-content:space-around         // 均匀分布项目，项目在两端有一半大小的空间
align-content:space-evenly         // 均匀分布项目，项目周围有相等的空间
align-content: stretch;            //均匀分布项目,拉伸‘自动’-大小的项目以充满容器 */

8、单个弹性元素在交叉轴上的排布（在整体的 align-items 基础上）

align-self : flex-start       //排列在交叉轴的起点
align-self : flex-end        //排列在交叉轴的终点
align-self : center          //排列在交叉轴的中间
align-self : stretch          //伸长占满整个交叉轴

9、弹性元素可用空间分配

flex-grow     //扩大
flex-shrink   //缩小

10、弹性元素组合定义

flex:grow shrink basis   //把放大、缩小和基准尺寸组合定义

11、弹性元素顺序控制

order:num //默认为0，越大越靠后。可以用来控制元素上下移动

12、弹性布局操作文本节点

text-align:center      //文本水平居中
align-content:center   //文本竖直居中。有多行时
align-items:middle     //文本竖直居中。单行时用