精华内容
下载资源
问答
  • flex布局

    千次阅读 多人点赞 2019-04-25 17:19:34
    flex布局flex布局flex布局flex布局flex布局flex布局

    flex

    什么是flex?
    flex意味“弹性盒子”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
    采用flex布局的元素,称为flex容器,它的所有子元素自动成为容器成员。
    作用:
    如果需要将容器设为flex容器,则第一步如下将div设置为flex容器:

    div
    {
     display: flex;
    }
    

    容器的属性

    flex-direction决定子元素的排列方向

    决定主轴的方向(即项目的排列方向)。它有4个可能的值 :
    (1)row默认值,主轴为水平方向,子元素从左向右排列
    实例:

     <div class="mydiv">
    <div>我是1</div>
    <div>我是2</div>
    <div>我是3</div>
     </div>
    
    .mydiv
    {
     width: 400px;
     border: 2px solid pink;
     padding: 10px;
     display: flex;
      flex-direction: row;
    }
    

    在这里插入图片描述
    (2)row-reverse:主轴为水平方向,起点在容器的右端。

    .mydiv{
     flex-direction: row-reverse;
    }
    

    在这里插入图片描述
    (3)column:主轴为垂直方向,起点在容器的上沿。

    .mydiv{
    flex-direction: column;
    }
    

    在这里插入图片描述
    (4)column-reverse:主轴为垂直方向,起点在容器的下沿。

    .mydiv{
    flex-direction: column-reverse;
    }
    

    在这里插入图片描述

    flex-wrap规定如果一行放不下如何换行。

    默认情况下容器里变得额所有项目都排在一条线上,flex-wrap定义如果一行排不下 如何换行。它可能的值有三个:
    (1)nowrap(默认):不换行。

    div{
     flex-direction: row;
     flex-wrap: nowrap;
    }
    

    如果不换行,则会挤压子元素,放在一条线上。
    在这里插入图片描述
    (2)wrap:换行,第一行在上方。

    div{
     flex-direction: row;
     flex-wrap: wrap;
    }
    

    在这里插入图片描述
    (3)wrap-reverse:换行,第一行在下方。

    div{
     flex-direction: row;
     flex-wrap: wrap-reverse;
    }
    

    在这里插入图片描述

    flex-flow是上面两个属性的简写形式

    是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
    例如:

    flex-flow:row wrap;
    

    justify-content定义在主轴上的对齐方式

    justify-content 定义了项目在主轴上的对齐方式。它可能的值有5个:
    (1)flex-start向主轴的起始位置对齐,也就是从主轴的起始位置开始排列。

    div{
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
    }
    

    在这里插入图片描述
    (2)flex-end:向主轴结束位置对齐,也就是从主轴结束的位置开始排列。

    div{
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
    }
    

    在这里插入图片描述
    (3)center: 居中

    div{
     display: flex;
     flex-direction: row;
     justify-content: center;
    }
    

    在这里插入图片描述
    (4)space-between:如果有两个以上的项目,则容器主轴的开始和结束位置各一个,其他的项目均匀排列,项目之间的间隔相等。排列顺序同样和flex-direction有关。如果只有两个项目则一边一个。如果只有一个项目则只在容器主轴的开始位置排列

    div{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
    }
    

    在这里插入图片描述
    (5)space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。排列顺序同样和flex-direction有关。如果只有一个项目则排列在中间。

    div{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
    }
    

    在这里插入图片描述

    align-items定义项目在交叉轴(纵轴)上如何对齐

    align-items属性定义项目在交叉轴(纵轴)上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
    (1)flex-start:交叉轴的起点对齐。

    div{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    }
    

    在这里插入图片描述
    (2)flex-end:交叉轴的终点对齐。

    div{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    }
    

    在这里插入图片描述
    (3)center:交叉轴的中点对齐。

    div{
    display: flex;
    flex-direction: row;
    align-items: center;
    }
    

    在这里插入图片描述
    (4)baseline: 项目的第一行文字的基线对齐。

    div{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    }
    

    如下图效果,使第一行文字基线对齐。
    在这里插入图片描述
    (5)stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    div{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    }
    

    如下图未设置高度,元素自动填满整个容器。
    在这里插入图片描述

    align-content定义了多根轴线(多行)的对齐方式

    align-content属性定义了多根轴线(多行)的对齐方式。如果项目只有一根轴线(一行),该属性不起作用。
    如果flex-direction的值是column,则该属性定义了多列的对齐方式。如果项目只有一列,该属性不起左右。
    属性值包括:
    (1)stretch(默认值):多行占满整个交叉轴。

    div{
    display: flex;
    flex-direction: row;
     align-content: stretch;
    }
    

    在这里插入图片描述
    (2)flex-start:与交叉轴的起点对齐。

    div{
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
    }
    

    在这里插入图片描述
    (3)flex-end:与交叉轴的终点对齐。

    div{
     display: flex;
     flex-wrap: wrap;
     align-content: flex-end;
    }
    

    在这里插入图片描述
    (4)center:与交叉轴的中点对齐。

    div{
     display: flex;
     flex-wrap: wrap;
     align-content:center;
    }
    

    在这里插入图片描述
    (5)space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

    div{
     display: flex;
     flex-wrap: wrap;
     align-content:space-between;
    }
    

    在这里插入图片描述
    (6)space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    div{
     display: flex;
     flex-wrap: wrap;
     align-content:space-around;
    }
    

    在这里插入图片描述

    瓜分父容器的空间

    1.先了解什么是剩余空间
    现在有一个容器A,它的里面有三个元素a1,a2,a3,剩余空间=容器A的宽度-a1-a2-a3
    在这里插入图片描述

    flex-grow用于瓜分父容器的剩余空间

    flex-grow设置在flex容器的子项目上。

    flex-grow默认为0。
    上述例子中,如果A容器宽度为500px,a1的宽度为100px,a2的宽度为200px,a3的宽度为40px,那么剩余宽度为500-100-200-40=170px;
    例子1:
    如果此时我们队a1设置flex-grow:1,那么剩余的170px都会分给a1,a1原来有100px此时会有100px+170px=270px;
    例子2:
    如果a2此时也来瓜分剩余空间,a2中设置了flex-grow:2,那么父容器会把剩余空间分成三份,a1分1/3,a2分2/3

    flex-basis设置或检索弹性盒伸缩基准值。

    它的属性值可以设置:
    (1)一个长度单位或者一个百分比,规定灵活项目的初始长度
    (2)auto,默认值,长度等于灵活项目的长度,如果该项目未指定长度,则长度将根据内容决定。
    实例:现在在一个flex容器中有3个div

    <div class="mydiv">
    <div>我是1</div>
    <div>我是2哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
    <div>我是3哈哈哈哈哈哈哈哈</div>
    </div>
    

    这三个div都没有设置宽度,第二个div设置了flex-basis: 80px;

    .mydiv
    {
     width: 350px;
     border: 2px solid pink;
     padding: 10px;
     display: flex;
     flex-wrap: wrap;
     align-content:space-around;
    }
    .mydiv div
    {
      height: 100px;
    }
    .mydiv div:first-child
    {
      background-color: red;
    }
    .mydiv div:nth-child(2)
    {
      background-color: green;
      flex-basis: 80px;
    }
    .mydiv div:nth-child(3)
    {
      background-color: orange;
    }
    

    效果如下:
    在这里插入图片描述
    综上所述,第一个div宽度会根据内容的多少来显示,第二个div设置了flex-basis为80px,所以它的宽度不会根据内容多而变宽,第三个div未设置宽度,它内容多了后会自动把它的宽度撑开。
    也就是说,在分配空间钱,如果子容器设置了flex-basis或者width,它会先跟父容器预约这么多的空间,然后剩下的才是归到剩余空间,然后父容器再把剩余空间分配给设置了flex-grow的容器,注:如果同时设置了flex-basis和width,那么width属性会被覆盖,也就是说flex-basis的优先级比width高,如果flex-basis和width其中有一个是auto,那么另外一个非auto的属性优先级会更高。

    flex-shrink指定flex容器中子元素的收缩规则

    一个flex容器,中有三个子容器,如果三个子容器的宽度和超过了父容器,这时候该怎么处理呢?
    flex环境默认是不换行的,即使父容器宽度不够也不会,除非设置了flex-wrap来换行。
    例如:
    现在有一个父容器,宽度是500px,三个子容器,A的宽度是200px,B的宽度是300px,C的宽度是150px;
    剩余空间是500-200-300-150结果为-150,即使B设置了flex-grow,由于没有剩余空间,所以B分配到的剩余空间是0
    由于父容器的宽度500不会变,解决办法:1.使子容器换行,2.压缩子容器使之刚好撑满父容器的宽度。
    采用第二种解决方法就可以使用flex-shrink,这个属性就是定义一个子容器的压缩比例。它的默认值是1,所以A,B,C,三个子容器的压缩比例是一样的1:1:1,如果此刻把B的压缩比例设为2,会怎样呢?
    可以发现B被压缩的更多了,A和C得到了更多的空间,计算方式如下:
    剩余空间为:500-200-300-150=-150
    如果A设为flex-shrink:1,B为flex-shrink:2,C为flex-shrink:1
    那么A被压缩的空间为1501/4,A的实际空间为200-1501/4
    那么B被压缩的空间为1502/4,B的实际空间为300-1502/4
    那么C被压缩的空间为1501/4,C的实际空间为150-1501/4

    ##总结 通过上面的分析,我们就可以得出这样几个结论:
    1、剩余空间=父容器空间-子容器1.flex-basis/width - 子容器2.flex-basis/width - …
    2、如果父容器空间不够,就走压缩flex-shrink,否则走扩张flex-grow;
    3、如果你不希望某个容器在任何时候都不被压缩,那设置flex-shrink:0;
    4、如果子容器的的flex-basis设置为0(width也可以,不过flex-basis更符合语义),那么计算剩余空间的时候将不会为子容器预留空间。
    5、如果子容器的的flex-basis设置为auto(width也可以,不过flex-basis更符合语义),那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。
    https://www.cnblogs.com/ghfjj/p/6529733.html

    2.使用flex实现水平垂直居中

    设置如下,需要在被居中层的父级中设置:

    .parent{
    	justify-content:center;
    	align-items:center;
    	display:flex;
    }
    
    展开全文
  • Flex布局

    2021-01-09 10:15:31
    Flex布局 flex布局表示弹性布局,为盒状模型提供最大的灵活性。 适用范围 任何一种元素都可以指定为flex布局 .wrap{ display:flex; } 使用时应该注意些什么? 如果是Webkit内核的浏览器,需要加上-webkit...

    Flex布局

    flex布局表示弹性布局,为盒状模型提供最大的灵活性。

    适用范围

    任何一种元素都可以指定为flex布局

    .wrap{
        display:flex;
    }
    

    使用时应该注意些什么?

    • 如果是Webkit内核的浏览器,需要加上 -webkit 前缀
    • 在父级元素设置为flex布局后,子元素的float、clear、vertical-align属性都将失效,所以在使用flex布局时,不应该先设置完子元素布局后再使用。

    flex布局中的一些基本概念

    容器和项目

    • 什么叫容器
      采用flex布局的元素被称作容器。

    • 什么叫项目
      在flex布局中的子元素被称作项目。

    即父级元素采用flex布局,则父级元素为容器,全部子元素自动成为项目。

    项目在容器中的显示

    • 容器中的主轴和交叉轴
      在容器中默认有水平的主轴和垂直的交叉轴,项目在容器中默认沿主轴排列

    容器的一些属性

    有六个常用属性设置在容器上,分别为:

    • flex-direction
    • flex-wrap
    • flew-flow
    • justify-content
    • align-items
    • align-content

    flex-direction 属性

    flex-direction 属性设置容器主轴的方向

    .wrap{
        flex-direction:row | row-reverse | column | column=reverse;
    }
    
    //示例代码
    <div class="wrap">
        <div class="red-item item"></div>
        <div class="green-item item"></div>
        <div class="blue-item item"></div>
    </div>
    

    包含四个属性值:

    • row: 默认值,表示沿水平方向,由左到右。
      在这里插入图片描述
    • row-reverse :表示沿水平方向,由右到左
      在这里插入图片描述
    • column:表示垂直方向,由上到下
      在这里插入图片描述
    • column-reverse:表示垂直方向,由下到上
      在这里插入图片描述

    flex-wrap属性

    flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。

    .wrap{
        flex-wrap:nowrap | wrap | wrap-reverse;
    }
    

    包含三个属性值:

    • nowrap:表示不换行
      在这里插入图片描述

    说明:设置的项目的宽度就失效了,强行在一行显示

    • wrap:正常换行,第一个位于第一行的第一个
      在这里插入图片描述
    • wrap-reverse:向上换行,第一行位于下方
      在这里插入图片描述

    flex-flow属性

    flex-flow属性是flex-deriction和flex-wrap属性的简写,默认值为[row nowrap];,

    • 第一个属性值为flex-direction的属性值
    • 第二个属性值为flex-wrap的属性值

    justify-content 属性

    justify-content属性用于设置项目在容器中的对齐方式。

    .wrap{
        justify-content: flex-start | flex-end | center |space-between | space-around
    }
    

    该属性主要要五个属性值:

    • flex-start:默认值,左对齐
      在这里插入图片描述
    • flex-end:右对齐
      在这里插入图片描述
    • center:居中对齐
      在这里插入图片描述
    • space-between:两端对齐
      在这里插入图片描述
    • space-around:每个项目两侧的间距相等
      在这里插入图片描述

    align-items 属性

    align-items定义了项目在交叉轴上是如何对齐显示的

    .wrap{
        align-items:flex-start | flex-end | center | baseline | stretch
    }
    

    该属性主要有五个属性值:(以交叉轴从上向下为例)

    • flex-start:交叉轴的起点对齐
      在这里插入图片描述
    • flex-end 交叉轴的终点对齐
      在这里插入图片描述
    • center 交叉轴居中对齐
      在这里插入图片描述
    • baseline 项目的第一行文字的基线对齐
    • stretch:默认值:如果项目未设置高度或者高度为auto,将占满整个容器的高度
      在这里插入图片描述

    项目的一些属性

    设置在项目上的属性主要有:

    • order 属性

    order属性

    order属性设置项目排序的位置,默认值为0,数值越小越靠前

    .item{
        order:<Integer>;
    }
    
    • 1
    • 2
    • 3
    .green-item{
        order:-1;
    }
    
    • 在这里插入图片描述

    flex-grow 属性

    flex-group属性用来控制当前项目是否放大显示。默认值为0,表示即使容器有剩余空间也不放大显示。如果设置为1,则平均分摊后放大显示。

    .green-item{
        order:-1;
        flex-grow:2;
    }
    

    在这里插入图片描述

    flex-shrink 属性

    flex-shrink属性表示元素的缩小比例。默认值为1,如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0,则空间不足时该项目也不缩小。

    flex-basis属性

    flex-basis属性表示表示项目占据主轴空间的值。默认为auto,表示项目当前默认的大小。如果设置为一个固定的值,则该项目在容器中占据固定的大小。

    flex属性

    flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为:0 1 auto;

    .item{
        flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto)
    }
    

    align-self 属性

    align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式

    .item{
        align-self: flex-start | flex-end | center | baseline | stretch 
    }
    展开全文
  • flex 布局

    2020-01-07 09:24:05
    目录 1、认识 flex 布局 ...flex 布局(Flexible 布局,弹性布局,弹性盒子),是CSS3的一种新布局模式。flex 布局是目前 web 开发中使用最多的布局方案,目前在移动端用的最多,PC端也使用越来越多了。在认识 ...

    目录

    1、认识 flex 布局

    2、flex 布局模型

    3、flex 相关属性

    4、flex container 相关属性

    5、flex items 相关属性


    1、认识 flex 布局

    flex 布局(Flexible 布局,弹性布局,弹性盒子),是CSS3的一种新布局模式。flex 布局是目前 web 开发中使用最多的布局方案,目前在移动端用的最多,PC端也使用越来越多了。在认识 flex 布局之前,首先明确两个重要的概念:

    (1)开启了 flex 布局的元素叫 flex container,flex container 里面的直接子元素叫做 flex items。

    (2)通过设置 display 属性为 flex 或者 inline-flex 可以成为 flex container,display 属性的属性值为 flex 下的 flex container 以 block-level (块元素)形式存在,display 属性的属性值 inline-flex 下的 flex container 以 inline-level (行内元素)形式存在。

    <div style="display:flex/inline-flex"> <!--设置display属性为flex或者inline-flex 开启flex布局-->
        <div></div>            <!--设置display属性为flex或者inline-flex 可以成为flex container-->
        <div></div>
        <div></div>
    </div>

    2、flex 布局模型

    3、flex 相关属性

    应用在 flex container 上的CSS属性 应用在 flex items 上的CSS 属性
    flex-direction 设置flex items的排列方向 order 决定 flex items 的排布顺序
    justify-content 设置flex items在主轴的对齐方式 align-self 覆盖 flex container 设置的 align-items
    align-items 设置flex items在交叉轴的对齐方式 flex-grow 决定 flex items 如何扩展
    flex-wrap 决定 flex items 是单行还是多行显示 flex-shrink 决定 flex items 如何收缩
    flex-flow flex-direction、flex-wrap 两个属性的简写 flex-basis 设置 flex items 在主轴方向上的 base size
    align-content 决定多行 flex items 在 cross axis 上的对齐方式 flex flex-grow、flex-shrink、flex-basis 的简写

    4、flex container 相关属性

    4.1 flex-direction(flex container 的属性)

    将父元素设置 flex 布局后,其 flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布,flex-direction 属性决定了 main axis 的方向,有下面 4 个取值:

    row(默认值,主轴从左到右) row-reverse(主轴从右到左) column(主轴从上到下) column-reverse(主轴从下到上)

    4.2 justify-content(flex container 的属性)

    将父元素设置 flex 布局后,justify-content 属性决定了 flex items 在 main axis 上的对齐方式,有下面几个取值:

    flex-start(默认值):与 main start 对齐 flex-end:与main end对齐 center:居中对齐
    space-between:flex items之间的距离相等,与main start、main end两端对齐
    space-evenly:flex items 之间的距离相等,flex items 与main start、main end之间的距离等于flex items之间的距离
    space-around:flex items 之间的距离相等,flex items 与main start、main end之间的距离是flex items之间距离的一半

    4.3 align-items(flex container 的属性)

    将父元素设置 flex 布局后,align-items 属性决定了 flex items 在 cross axis上的对齐方式,有下面几个取值:

    normal:在弹性布局中,效果和stretch一样,如果flex items没有设置高度,会自动拉伸至填充flex container
    stretch:当flex items在cross axis 方向的 size为auto时,会自动拉伸至填充flex container baseline:与基准线(内容第一行文本)对齐
    center:居中对齐 flex-start:与cross start对齐 flex-end:与cross end对齐

    4.4 flex-wrap(flex container 的属性)

    将父元素设置 flex 布局后,flex-wrap 属性决定 flex items 在 flex container 中是单行还是多行显示,有下面几个取值:

    nowrap(默认):flex items单行显示 wrap:flex items多行显示 wrap-reverse:多行(对比wrap,cross start与cross end相反)

    4.5 flex-flow(flex container 的属性)

    将父元素设置 flex 布局后,flex-flow 属性是 flex-direction || flex-wrap 的简写,可以省略,顺序任意。

    4.6 align-content(flex container 的属性)

    将父元素设置 flex 布局后,align-content 属性决定了多行 flex items 在 cross axis 上的对齐方式,用法与 justify-content 类似,有下面几个取值:

    stretch(默认值):与align-items的 stretch类似 center:居中对齐
    flex-start:与cross start对齐 flex-end:与cross end对齐
    space-between:flex items之间的距离相等,与cross start、cross end两端对齐
    space-around:flex items之间的距离相等,flex items与cross start、cross end 之间的距离是flex items之间距离的一半
    space-evenly:flex items 之间的距离相等,flex items 与cross start、cross end 之间的距离等于flex items之间的距离

    5、flex items 相关属性

    5.1 order(flex items 的属性)

    将父元素设置 flex 布局后,子元素的 order 属性决定了 flex items 的排布顺序,可以设置任意整数(正整数、负整数、0),值越小就越排在前面,默认值是 0。

    5.2 align-self(flex items 的属性)

    将父元素设置 flex 布局后,子元素 flex items 可以通过 align-self 属性覆盖 flex container 设置的 align-items,有下面几个取值:

    auto(默认值):遵从 flex container 的 align-items 设置
    stretch、flex-start、flex-end、center、baseline,效果跟 align-items 一致

    5.3 flex-grow(flex items 的属性)

    将父元素设置 flex 布局后,子元素的 flex-grow 属性决定了 flex items 如何扩展,可以设置任意非负数字(正小数、正整数、0),默认值是0。当 flex container 在 main axis 方向上有剩余 size 时,flex-grow 属性才会有效:

    (1)如果所有 flex items 的 flex-grow 总和 sum 超过 1,每个 flex item 扩展的 size 为 flex container 的剩余 size*flex-grow/sum。

    (2)如果所有 flex items 的 flex-grow 总和不超过 1,每个 flex item 扩展的 size 为 flex container 的剩余 size*flex-grow。

    flex items 扩展后的最终size 不能超过 max-width\max-height。

    5.4 flex-shrink(flex items 的属性)

    将父元素设置 flex 布局后,子元素的 flex-shrink 属性决定了 flex items 如何收缩,可以设置任意非负数字(正小数、正整数、0),默认值是1。当 flex items 在 main axis 方向上超过了 flex container 的 size,flex-shrink 属性才会有效。

    (1)如果所有 flex items 的 flex-shrink 总和超过 1,每个 flex item 收缩的 size 为 flex items 超出 flex container 的 size*收缩比例/所有 flex items 的收缩比例之和。

    (2)如果所有 flex items 的 flex-shrink 总和 sum 不超过 1,每个 flex item 收缩的 size为 flex items 超出 flex container 的size*sum*收缩比例/所有 flex items 的收缩比例之和,收缩比例=flex-shrink*flex item的base size,base size 就是 flex item 放入flex container 之前的 size。

    flex items 收缩后的最终 size 不能小于min-width\min-height

    5.5 flex-basis(flex items 的属性)

    将父元素设置 flex 布局后,子元素的 flex-basis 用来设置 flex items 在 main axis 方向上的 base size,可以设置为 auto(默认值)、具体的宽度数值(100px)。

    决定 flex items 最终 base size 的因素,从优先级高到低:(1)max-width\max-height\min-width\min-height(2)flex-basis(3)width\height(4)内容本身的 size。

    5.6 flex(flex items 的属性)

    将父元素设置 flex 布局后,子元素的 flex 属性是 flex-growlI flex-shrink  flex-basis 的简写,flex 属性可以指定1个,2个或3个值。

    单值语法:值必须为以下其中之一:(1)一个无单位数(<number>):它会被当作<flex-grow>的值。(2)一个有效的宽度(width)值:它会被当作<flex-basis>的值。(3)关键字none,auto或initial。

    双值语法:第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。第二个值必须为以下之一:(1)一个无单位数:它会被当作<flex-shrink>的值。(2)一个有效的宽度值:它会被当作<flex-basis>的值。

    三值语法:第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。第二个值必须为一个无单位数,并且它会被当作<flex-shrink>的值。第三个值必须为一个有效的宽度值,并且它会被当作<flex-basis>的值。

    展开全文
  • Flex 布局

    2019-11-24 23:30:59
    什么是Flex布局?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box { display: flex; } 基本概念 采用 Flex 布局的元素,称为 Flex 容器...

    什么是Flex布局?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
    .box { display: flex; }

    基本概念
    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。
    项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
    属性
    1、flex-direction
      flex-direction 属性决在这里插入代码片定主轴的方向(即子元素的排列方向)。

    .box {
      	flex-direction: row | row-reverse | column | column-reverse;
    }
    

    该属性有四个值:

    row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上沿。
    column-reverse:主轴为垂直方向,起点在下沿。
    2、flex-wrap
    .box{
    flex-wrap: nowrap | wrap | wrap-reverse;
    }
    属性值:
    nowrap:(默认),不换行
    wrap:换行,第一行在上方
    wrap-reverse:换行,第一行在下方

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

    4、justify-content 定义了子元素在主轴上的对齐方式
    .box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
    }

    flex-start(默认值):左对齐
    flex-end:右对齐
    center: 居中
    space-between:两端对齐,子元素之间的间隔都相等。
    space-around:每个子元素两侧的间隔相等。所以,子元素之间的间隔比项目与边框的间隔大一倍。
    5、align-items align-items 属性定义项目在交叉轴上如何对齐。
    .box {
    align-items: flex-start | flex-end | center | baseline | stretch;
    }

    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 子元素的第一行文字的基线对齐。
    stretch(默认值):如果子元素未设置高度或设为auto,将占满整个容器的高度。
    6、align-content align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    .box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

    flex-start:与交叉轴的起点对齐。
    flex-end:与交叉轴的终点对齐。
    center:与交叉轴的中点对齐。
    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值):轴线占满整个交叉轴(需设置高度为auto)。

    展开全文
  • FLEX布局

    千次阅读 2020-04-04 13:25:30
    FLEX布局 FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。 基础 通过指定display: flex来标识一个弹性布局盒子,称为FLEX容器,容器内部的盒子就成为FLEX...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,923
精华内容 8,369
关键字:

flex布局