当前位置： 移动技术网 > IT编程>网页制作>CSS > flex布局开发

flex布局开发

2019年11月26日  | 移动技术网IT编程  | 我要评论

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属性定义子项的排列顺序（前后顺序）

      • 数值越小排列越靠前

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网