flex布局开发

Posted 2020-11-22 sspofa

flex布局开发

1. 布局原理

   • flex时flexible Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以定位flex布局
   • 【注意】
     • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
     • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

2. 常见父项属性

   • flex-direction：设置主轴的方向

     • flex-direction属性值决定主轴的方向（及项目的排列方向）

     • 【注意】

       • 主轴和侧轴是会变化的，就看flex-diretion设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的

         属性值	说明
         row	默认值从左到右
         row-reverse	从右到左
         column	从上到下
         column-reverse	从上到下

   • justify-content：设置主轴上的子元素排列方式

     • 【注意】

       • 使用这个属性之前要确定好主轴是哪个

         属性值	说明
         flex-start	默认值 从头部开始 如果主轴是x轴，则从左到右
         flex-end	从尾部开始排列
         center	在主轴居中对齐
         space-around	平分剩余空间
         space-between	先两边贴边 在平分剩余空间

   • flex-wrap：设置子元素是否换行

     • 属性值	说明
       nowrap	默认值，不换行
       wrap	换行

   • align-content：设置侧轴上的子元素的排列方式（多行）

     属性值	说明
     flex-start	从上到下
     flex-end	从下到上
     center	垂直居中
     strech	拉伸（默认值）【项目不要给高度】
     space-around	子项在侧轴平分剩余空间
     stretch	设置子项元素高度平分元素高度

   • align-items：设置侧轴上的子元素排列方式（单行）

     属性值	说明
     flex-start	从上到下
     flex-end	从下到上
     center	垂直居中
     strech	拉伸（默认值）【项目不要给高度】

   • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3. 子项常见属性

   • flex子项占的分数

     .item{
     flex:<number>;
     }

   • align-self控制子项子级在侧轴的排列方式

     • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

     默认值是auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch

   • order属性定义子项的排列顺序（前后顺序）

     • 数值越小排列越靠前