zoukankan      html  css  js  c++  java
  • Flex弹性布局

    父级:

    display:flex

    如果父级用了弹性布局,子元素就 不需要float了

    父级上的其它属性:

    justify-content:子元素水平排列方式

                    center  居中

                    space-between 两端对齐

                    space-around  每个子元素拉手分布

               flex-start  左

                                      flex-end   右

     align-items:子元素垂直排列方式

                 center:居中

              flex-start  上

                                flex-end   下

    align-content  多行子元素,垂直排列

                                center:居中

              flex-start  上

                                flex-end   下

     flex-direction:排列方向

                         row:横向

                         row-reverse  横向翻过

                         column   纵向

                         column-reverse  纵向翻过

    flex-wrap:  如何包裹子元素的

                   wrap:子元素换行

                   no-wrap:子元素不换行

    flex-flow:flex-direction和flex-wrap的简写

     

    子级:

        flex:1   平分父级的宽度

        flex:grow   让换行的子元素(假如两个),占满新的一行。放大

        align-self:自己的单独的,用来覆盖父级的

        order  子元素顺序  数值越小越靠前   

        

    例子

  • 相关阅读:
    React 之 jsx
    React 之 初识
    vue 之 svg
    c#进阶 之 特性
    c#进阶 之 反射Reflection
    面试题解答分析
    c#进阶 之 泛型
    c#进阶 之 修饰符
    c#进阶 之 方法汇总
    微信开发学习(二)
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11573941.html
Copyright © 2011-2022 走看看