zoukankan      html  css  js  c++  java
  • flex布局

    一、概述flex布局

    1、flex布局非常好用,任何一个容器都可以使用Flex布局,但是需要注意版本的兼容性 ,容器可以理解为是项目的父元素。项目可以是块级元素,也可以是行内元素。

    2、缺点:

         是PC兼容性相对较差,IE要10,甚至11以上才有很好的兼容,不过大家可以用它在H5页面好好发挥

    3、属性:

          我们可以用容器属性控制项目的:方向、轴线转折方向、主轴对齐方式、交叉轴对齐方式、多根轴对齐方式 
    用项目属性控制:排列顺序、放大比例、缩小比例、默认项目本身大小、单个项目的对齐方式

    容器: 
    flex-direction: row | row-reverse | column | column-reverse; 
    flex-wrap: nowrap | wrap | wrap-reverse; 
    flex-flow 
    justify-content: flex-start | flex-end | center | space-between | space-around; 
    align-items: flex-start | flex-end | center | baseline | stretch; 
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    项目: 
    order: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; flex 
    align-self: auto | flex-start | flex-end | center | baseline | 
    stretch;

    4、注意:

      兼容性:对安卓、ios兼容性 
      元素属性冲突:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效

    二、兼容性解决

    父级flex布局:

    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;  /* OLD - Firefox 19- H5不用考虑 */
    display: -mz-flexbox; /* TWEENER IE 10 */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    主轴、交叉轴

    三、几种常见flex使用示例

    1、设置元素垂直居中对齐

    <div class="demo">
      <div class="inner">
        <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
      </div>
    </div>
    .demo{
      width: 500px;
      height: 300px;
      border: 1px solid purple;
      display: flex;                /*设置为flex布局*/
      justify-content: center;   /*水平居中*/
      align-items: center;     /*垂直居中*/
    }
    .inner{
      width: 160px;
      height: 160px;
      font-size: 26px;
      border: 1px solid red;
    }

    2、 制作导航栏

      

  • 相关阅读:
    自定义博客园JS插件
    SpringBoot 常见问题记录
    SpringBoot(十)-- 整合MyBatis
    SpringBoot(九)-- SpringBoot JDBC
    SpringBoot(八)-- 日志
    SpringBoot(七)-- 启动加载数据
    Java设计模式(14)责任链模式(Chain of Responsibility模式)
    Java设计模式(13)模板模式(Template模式)
    Java设计模式(12)迭代模式(Iterator模式)
    Java设计模式(11)外观模式(Facade模式)
  • 原文地址:https://www.cnblogs.com/catherLee/p/9542774.html
Copyright © 2011-2022 走看看