zoukankan      html  css  js  c++  java
  • 温馨小程序前端布局Flex

    伸缩容器支持的属性有:

    1,display

    2,flex-direction

    3,flex-wrap

    4,flex-flow

    5,justify-content

    6,align-items

    7,align-content

    8,order

    9,flex-grow

    10,flex-basis

    11,flex

    12,align-self

    主要介绍这几个属性

    display:flex    |   display:inline-flex

    该属性用于指定主轴方向,语法为

    flex-direction: row  | row-reverse  | column  | column-reverse

    该属性用来指定伸缩容器的主轴线方向空间不足的情况下,是否换行以及该如何换行

    flex-wrap: nowrap | wrap  | wrap-reverse 

    该属性是flex-direction和flex-wrap属性的缩写版本,它同时指定了伸缩容器的主轴和侧轴,其默认属性为row nowrap

    flex-flow: flex-direction | flex-wrap

    该属性用来定义伸缩项目沿主轴线的对齐方式

    justify-content: flex-start | flex-end | center | space-between | space-around

    该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式

    align-items: flex-start | flex-end | center | baseline |  stretch;

    用来调整伸缩项目出现换行后在交叉轴上的对齐方式,类似于伸缩项目在主轴上使用justify-content

    align-content: flex-start | flex-end | center | space-between | space-around | stretch

    flex-grow

    用于定义伸缩项目的放大比例,默认值0,即如果存在剩余空间,也不放大,如果所有伸缩项目的flex-grow设置为1,那么每个伸缩项目将设置为大小相等的剩余空间,如果你将其中一个flex-frow伸缩项设置为2,那么这个伸缩项目所占剩余空间是其他伸缩项目所占胜于空间的两倍
     

    flex-shrink

    该属性用来定义伸缩项目的收缩能力

    flex-basis

    该属性用来设置伸缩项目的基准值,剩余空间按比率进行伸缩
     

    flex

    该属性是flex-grow ,flex-shrink,flex-basis属性的缩写
    flex: none | flex-grow flex-shrink flex-basis
     

    align-self

    用于设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式
    align-self: auto | flex-start | flex-end | center | baseline | stretch
  • 相关阅读:
    map和cmath
    优先级队列queue
    algorithm头文件(sort 函数)
    12
    利用sqlmap简单注入dvwa
    集群高可用之lvs+keepalive
    集群高可用之lvs
    zabbix的配置之新版微信报警(二)
    Python升级版本2.6到2.7
    zabbix的安装(一)监控os资源:内存,cpu,io,负载,带宽
  • 原文地址:https://www.cnblogs.com/UncleWang001/p/9612672.html
Copyright © 2011-2022 走看看