zoukankan      html  css  js  c++  java
  • 弹性盒子

    弹性盒子 flex

        弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器

      flex 常用属性

    • justify-content;设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
    • flex-wrap;设置弹性盒子的子元素超出父容器时是否换行。
    • align-content:当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式

       justiffy-content 属性

        space-between:两端对齐中间均分

        center:居中

        flex-start:起点对齐

        flex-end:终点对齐

    语法

    div
    {
        display: flex;
        justify-content: space-between;
    }
    

      flex-wrap属性

        nowrap:默认值 不换行

        wrap:换行  第一行在上

        wrap-reverse:换行  第一行在下 

    语法

    div{
    
    display:flex;
    flex-wrap: wrap;
    }
    

      align-content属性

        center:中心对齐

        flex-start:起点对齐

        flex-end:终点对齐

    语法

    div
    {
        display: flex;
        align-content:center;
    }
    

      

  • 相关阅读:
    Java之this关键字的用法
    JavaSE 之 final 初探
    LinkedList 浅析示例
    HashSet 浅析示例
    ArrayList 浅析示例
    MySQL5.7 修改密码
    IE10 和 Chrome50 对日期 new Date() 支持的区别
    databtables 设置(显示)行号
    团队管理
    财务名称
  • 原文地址:https://www.cnblogs.com/gaojian910/p/10952114.html
Copyright © 2011-2022 走看看