zoukankan      html  css  js  c++  java
  • flex布局解说和属性

    1. flex-direction 规定当前DIV下面的子元素是横向布局还是纵向布局

    row 默认值,横向布局相当于float:left
    column 纵向,相当于DIV默认的垂直方向

     

                                                                                  

     

    2.justify-conten 主轴居左,居中,居右(这跟flex-direction的对齐方式改变而改变,没有固定的横向和纵向)

    flex-start 模块居左边
    flex-end 模块居右边
    center 模块居中(相当于margin:0 auto)
    space-between 模块两端对齐

     

     

     

     

     

    3.align-items 侧轴居上,居中,居下(这跟flex-direction的对齐方式改变而改变,没有固定的横向和纵向)

    flex-start 模块垂直居上
    center 模块垂直居中(line-height:50px)
    flex-end 模块垂直居下

    4.flex-wrap flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向

    nowrap 默认值,所有模块一行展示
    wrap 根据DIV的宽度,下面的模块自动是多行还是一行横向排版

     

    5.flex-shrink处理文本溢出

    number 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

    6:align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

    auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
    baseline

    元素位于容器的基线上。

    如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

    center

    元素位于容器的中心。

    弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

     

     

     

     




  • 相关阅读:
    Bypass WAF
    一种简单的hook方法--LD_PRELOAD变量
    Linux C:access()时间条件竞争漏洞
    环境变量法提权
    sudo-tcpdump提权法
    asynico转载
    pychar 2020.1.2激活
    临时mysql 链接池
    python pip 使用阿里云镜像安装库
    zookeeper kafaka 临时保存
  • 原文地址:https://www.cnblogs.com/binmengxue/p/10108667.html
Copyright © 2011-2022 走看看