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

    一、简介

        Flex (Flexible Box),意为"弹性布局",用来为盒状模型提供最大的灵活性。

        容器指定 flex布局:

    display: flex;
    
    // 行内元素的flex布局
    display: inline-flex;
    
    // webkit内核的浏览器 flex布局
    display: -webkit-flex;
    display: flex;
    

    二、基本概念

        采用 Flex 布局的元素,称为 Flex 容器(flex container)。container内部的子元素自动成为容器成员,称为 Flex 项目(flex item)。

        容器默认存在两根轴:水平的主轴(main axis) 和垂直的交叉轴(cross axis)。

    三、Flex在容器中的六个属性

        1、flex-direction       容器沿主轴的排列方向       row(横向正向)  row-reverse(横向反向)  column(纵向正向)  column-reverse(纵向反向)

        2、flex-wrap            容器内是否换行                nowrap(不换行)  wrap(换行)  wrap-reverse(换行,第一行在下面,新的一行在旧的一行上面)

        3、flex-flow             flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

        4、justify-content    主轴上的对齐方式             flex-start(靠左)  center(居中)  flex-end(靠右)  space-between(两端对齐,项目之间的间隔都相等)  space-around(每个项目两侧的间隔相等)

        5、align-items         容器内交叉轴的对齐方式       flex-start(沿上边对其)  center(居中对其)  flex-end(沿下边对其)  baseline(沿项目的第一行文字的基线对其)  stretch(上下充满容器高度)

        6、align-content      多条主轴纵向的对齐方式    flex-start(靠上)  center(垂直居中)  flex-end(靠下)  space-between(上下两端对齐,主轴之间的间隔都相等)  space-around(每个主轴两侧的间隔相等)

  • 相关阅读:
    jzoj5377 开拓
    JZOJ5371 组合数问题
    JZOJ 10043 第k小数
    联赛emacs配置
    11.7 NOIP总复习总结
    cogs791 [HAOI2012] 音量调节
    bzoj1968 [Ahoi2005]COMMON 约数研究
    cogs 1330 [HNOI2008]玩具装箱toy
    cogs2479 偏序 cdq+树套树
    【CJOJ2433】陌上花开 CDQ分治
  • 原文地址:https://www.cnblogs.com/Lyh1997/p/14403768.html
Copyright © 2011-2022 走看看