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  子元素顺序  数值越小越靠前   

        

    例子

  • 相关阅读:
    使用servicename连接Oracle数据库
    使用SID连接Oracle数据库
    使用xlrd模块
    【Project Euler 8】Largest product in a series
    Git使用帮助
    【Project Euler 1】Multiples of 3 and 5
    VSCode使用新体验
    导出牛顿引力形式为平方反比的两种方式
    NOIP2018游记
    即将退役声明
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11573941.html
Copyright © 2011-2022 走看看