CSS盒模型 flex

weixin_30701521

于 2017-06-02 16:21:00 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fengyingYZ/p/6933916.html

本文介绍了一种用于网页布局的Flex布局技巧，特别适用于移动端。通过设置display属性为box或其前缀变体，可以轻松实现元素的水平或垂直排列，并使元素在容器内居中显示。此外还提供了一些直接可用的样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用于网页布局，PC的话，兼容性不够，慎用，手机端的话，神器

整理部分通用的，可以直接复制的，省得下次再写一遍

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

  .box{
    display: box;
    display: -webkit-box;
    display: -moz-box;

    // 水平
    &.row{
      flex-direction: row;
    }

    // 垂直
    &.column{
      flex-direction: column;
    }

    // 水平垂直都居中
    &.centre{
      justify-content: center;
    }

　　// 1份
    .flex1{
      flex: 1;
    }
  }

　　这个IE兼容，稍后再补

转载于:https://www.cnblogs.com/fengyingYZ/p/6933916.html