精华内容
下载资源
问答
  • flex弹性伸缩盒模式

    2020-03-21 16:20:38
    flex弹性伸缩盒模式 ...使用浮动,在本来需要浮动的元素的父元素使用display:flex,实现伸缩布局,默认水平排列 flex配置 /* flex方向 */ flex-direction: column ; /* 伸缩换行 */ flex-wrap: wrap; ...

    flex弹性伸缩盒模式

    在这里插入图片描述
    在这里插入图片描述

    Flex 布局

    网页布局(layout)是 CSS 的一个重点应用。
    在这里插入图片描述
    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
    Flex 布局将成为未来布局的首选方案。
    在这里插入图片描述

    一、Flex 布局是什么?

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

    任何一个容器都可以指定为 Flex 布局。

    .box{
    display: flex;
    }
    

    行内元素也可以使用 Flex 布局。

    .box{
    display: inline-flex;
    }
    

    Webkit 内核的浏览器,必须加上-webkit前缀。

    .box{
    display: -webkit-flex; /* Safari */
    display: flex;
    }
    

    注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

    二、基本概念

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
    在这里插入图片描述
    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

    三、容器的属性 (紫色大盒子)

    以下6个属性设置在容器上。

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

    3.1 flex-direction属性

    在这里插入图片描述
    flex-direction属性决定主轴的方向(即项目的排列方向)。

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

    它可能有4个值。

    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。

    3.2 flex-wrap属性

    在这里插入图片描述
    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

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

    它可能取三个值。

    (1)nowrap(默认):不换行。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ivkUC1s-1584798845717)(./media/bg2015071007.png)]

    (2)wrap:换行,第一行在上方。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UUyrwXhX-1584798845719)(./media/bg2015071008.jpg)]

    (3)wrap-reverse:换行,第一行在下方。

    3.3 flex-flow

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

    .box {
    flex-flow: <flex-direction> || <flex-wrap>;
    }
    
    

    3.4 justify-content属性

    在这里插入图片描述
    justify-content属性定义了项目在主轴上的对齐方式。

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

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    3.5 align-items属性

    align-items属性定义项目在交叉轴上如何对齐。

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

    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    3.6 align-content属性

    在这里插入图片描述

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    .box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    
    

    该属性可能取6个值。

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

    四、项目的属性 (橙色小盒子)

    以下6个属性设置在项目上。

    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

    4.1 order属性

    在这里插入图片描述
    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

    .item {
    order: <integer>;
    }
    

    4.2 flex-grow属性

    在这里插入图片描述
    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    .item {
    flex-grow: <number>; /* default 0 */
    }
    
    

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

    4.3 flex-shrink属性

    在这里插入图片描述
    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

    .item {
    flex-shrink: <number>; /* default 1 */
    }
    
    
    

    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    负值对该属性无效。

    4.4 flex-basis属性

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

    .item {
    flex-basis: <length> | auto; /* default auto */
    }
    
    
    

    它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

    4.5 flex属性

    flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

    .item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    
    

    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

    建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

    4.6 align-self属性

    在这里插入图片描述
    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

    .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    
    

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    展开全文
  • Flex弹性伸缩布局

    千次阅读 2015-07-15 16:14:02
    Flex弹性伸缩布局   问题引出:在前段时间写过一篇文章描述了关于两层div的水平垂直居中问题,当时采用的是最传统的布局方式,可见原文http://blog.csdn.net/liujianhuan0622/article/details/46663265,其实CSS3...

    Flex弹性伸缩布局

     

    问题引出:在前段时间写过一篇文章描述了关于两层div的水平垂直居中问题,当时采用的是最传统的布局方式,可见原文http://blog.csdn.net/liujianhuan0622/article/details/46663265,其实CSS3中的Flex布局,可以更加方便的解决这类问题。

     

    任何一个容器都可以指定为Flex布局

    .box{

    display:flex;

    }

    行内元素也可以使用Flex布局

    .box{

    display:inline-flex;

    }

    采用Flex布局的元素,称为Flex容器,它的所有子元素自动成为容器成员,称为Flex项目(flex item)。容器默认存在两根轴:水平的主轴 main axis 和垂直的交叉轴 cross axis。主轴的开始位置叫做 main start,结束位置叫做main end;交叉轴的开始位置叫做cross start, 结束位置叫做cross end;项目默认沿着主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。如图所示。

     

    以下的6个属性设置在容器上

    1.flex-direction

    flex-direction属性决定主轴的方向(即项目的排列方向).

    .box{

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

    }

    row:

     

    row-reverse:

     

    column:

     

    column-reverse:

     

    2.flex-wrap

    默认情况下,项目都排列在一条线上,flex-wrap属性定义,如果一条轴线排不下,如何换行

    .box {

    flex-wrap:nowrap | wrap | wrap-reverse;

    }

    nowrap:

     

    wrap:

     

    wrap-reverse:

     

    3.flex-flow

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

    .box {

    flex-flow:<flex-direction> || <flex-wrap>;

    }

    4.justify-content

    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 | strech;

    }

    flex-start:与交叉轴的起点对齐。

     

    flex-end:与交叉轴的终点对齐。

     

    center:与交叉轴的中点对齐。

     

    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

     

    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

     

    stretch(默认值):轴线占满整个交叉轴。

     

    以下6个属性设置在项目上:

    order

    order属性定义项目的排列顺序,数值越小,排列越靠前,默认为0

    .item{

    order:<integer>;

    }

     

    flex-grow

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

    .item{

    flex-grow:<number>;

    }

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间;如果一个项目的flex-grow属性为2,其他项目都为1, 则前者占据的剩余空间将比其他项目多一倍。

     

    flex-shrink

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

    .item{

    flex-shrink:<number>;

    }

    如果所有项目的flex-shrink属性都为1,当空间不足的时候,都将等比例缩小;如果一个项目的flex-shrink属性为0,其他项目都为1, 则空间不足时,前者不缩小

     

    flex-basis

    .item{

    flex-basis:<length> | auto;

    }

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间main size,浏览器根据这个属性,计算主轴是否有多余空间,它的默认值是auto,即项目的本来大小。它可以设置为跟widthheight属性一样的值,则项目将占据固定空间 


    flex

    flex属性是flex-grow,flex-shrinkflex-basis的简写,默认值为01auto,后两个属性可选

    .item{

    flex:none 该属性有两个快捷值:auto(1 1 auto)none(0 0 auto)

    }


    align-self

    align-self属性允许单个项目有与其他不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性, 如果没有父元素,则等同于stretch

    .item{

    align-self:auto | flex-start | flex-end | center | baseline | strech;

    }


    到这里,开篇提出的那个以前用传统布局解决的问题已经完全可以很方便的解决掉了,也就不再赘述了。


    更多资讯可以微信扫描二维码,一起学习前端知识


    展开全文
  • 其强大的伸缩性,可以提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间 。在响应式...

    CSS3在布局方面做了非常大的改进,Flex布局官方称为CSS Flexble Box布局模型使得我们对块级元素的布局排列变得非常的灵活,适应性非常强。

    其强大的伸缩性,可以提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间 。在响应式开发中发挥极大的作用。

    本文主要讲解flex的属性详细使用方法

    1. 基本理解

    在使用Flex布局前我们首先要明白Flex模型是什么东西。Flex布局是由父容器(flex-container)和它的直接子元素flex项目(flex-item)构成。
    在这里插入图片描述
    在上图中你可以看到用来描述Flex容器和它的子元素的属性和术语,你可以阅读W3C的官方文档来了解他们的意思。

    需要理解的名词解释
    main-axis主轴(默认是水平的)
    cross-axis侧轴(默认是垂直的)
    main-start主轴开始的位置
    main-end主轴结束的位置
    cross-start侧轴开始的位置
    cross-end侧轴结束的位置

    直接子元素“项目”沿主轴排列;
    单个项目占据的主轴空间叫做main size,占据的侧轴空间叫做cross size。

    Flex布局2019年最新主流浏览器支持情况
    在这里插入图片描述


    2. 用法详解
    使用Flex布局首先要灵活理解Flex布局的原理(可以理解为把父元素变成一个flex-container容器,父元素中包括的子元素都成为该容器中的一个个项目,对父元素设置后,子元素会自动的做出相应的反应,所以我们不必对子元素一个个的进行布局,这样方便多了)

    首先:我们应在HTML中的父元素上设置display属性

        .flex-container {
                display: -webkit-flex;/* Safari */
                display: flex;
            }
    ```css
    或者想让它像内联元素一样可以:
    
    ```css
        .flex-container {
                display: -webkit-inline-flex;/*Safari*/
                display: inline-flex;
            }
    

    !注意:这是唯一的要设置在父容器上的属性,所有的直接子元素会成为自动flex项目。


    3.各属性详解

    常用属性

    容器属性项目属性
    01:flex-directionalign-self
    02:justify-content
    03:align-items
    04:align-content
    05:flex-wrap

    ⭐01:flex-direction

    Flex-direction调整主轴方向(默认为水平方向)
    flex-direction: row (默认)row:主轴水平排列
    flex-direction: columncolumn:主轴垂直排列
    flex-direction: row-reverserow-reverse:主轴水平翻转
    flex-direction: column-reversecolumn:主轴垂直翻转
    flex-direction:row(默认值) | row-reverse | column | column-reverse;
    //该属性指定了Flex的项目怎样在flex容器中排列,设置flex容器的主轴方向,它们(项目)两个主要的方向排列,就像一行一样水平排列或者像一列一样垂直排列。
    
    .flex-container {
      -webkit-flex-direction: row; /* Safari */
      flex-direction:         row;
      }
    

    flex-direction:row;

    .flex-container {
    	-webkit-flex-direction: row;/*Safari*/
    	flex-direction: row;
    }
    

    在这里插入图片描述
    flex-direction: row-reverse;

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

    在这里插入图片描述
    flex-direction:column;

     .flex-container {
                flex-direction: coulmn;
            }
    

    在这里插入图片描述
    flex-direction:column-reverse;

     .flex-container {
                flex-direction: coulmn-reverse;
            }
    

    在这里插入图片描述
    ⭐02 :justify-content

    justify-content调整主轴对齐
    justify-content:flex-start(默认)从主轴开始的方向默认值(所有项目向容器的左边对齐)
    justify-content:flex-end从主轴结束的方向默认值 (所有项目向容器的右边对齐)
    justify-content:center所有项目在容器中居中对齐
    justify-content:space-around所有的项目等分剩余的容器空间,包括第一个和最后一个项目(所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍)。
    justify-content:space-between第一个和最后一个项目向容器的边界对齐,剩余的空间各个项目等分
     justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;
    

    定义了项目在容器主轴上的对齐方式,当容器中的项目都是一行并且非弹性的时候或者项目是弹性的时候但是达到了他们的最小宽度的时候该属性可以定义容器中剩余空间的分配
    values:

    
    .flex-container {
      -webkit-justify-content: flex-start; /* Safari */
              flex-start;
    }
    

    justify-content:flex-start;

     .flex-container {
     			-webkit-justify-content: flex-start;/*Safari*/
                justify-content: flex-start;
            }
    

    在这里插入图片描述
    justify-content: flex-end;

     .flex-container {
                justify-content: flex-end;
                -webkit-justify-content: flex-end;
            }
    

    在这里插入图片描述
    justify-content:center;

     .flex-container {
                justify-content: center;
                -webkit-justify-content: center;
            }
    

    在这里插入图片描述
    justify-content: space-around;

    
    .flex-container {
      -webkit-justify-content: space-around; /* Safari */
      justify-content:         space-around;
    }
    

    在这里插入图片描述
    justify-content: space-between;

      .flex-container {
                justify-content: space-between;
                -webkit-justify-content: space-between;
            }
    

    在这里插入图片描述
    ⭐03:align-items;

    align-items调整侧轴对齐
    align-items: strech(默认值)项目会填充容器的整个高或者宽(fill the whole height ),从容器交叉轴的起点到交叉轴的结束点。
    align-items: flex-start项目会堆放在容器侧轴的起始位置(cross start)(类似于放在垂直方向顶部)
    align-items: flex-end项目会堆放在容器侧轴的结束位置(cross end)
    align-items: center项目会堆放在容器侧轴的居中位置
    align-items: baseline所有项目的基线会对齐
     align-items:flex-start | flex-end | center | baseline | stretch(默认值);
    

    定义项目在侧轴上的的对齐方式,侧轴与当前的轴线有关系,与justify-content很相似,只不过是垂直方向的;这属性为所有的项目设置默认侧轴上的对齐方式,包括匿名的。
    values:
    align-items:flex-stech;

    
    .flex-container {
      -webkit-align-items: stretch; /* Safari */
      align-items:         stretch;
    }
    

    在这里插入图片描述align-items:flex-start;

       .flex-container {
                align-items: flex-start;
                -webkit-align-items: flex-start;
            }
    

    在这里插入图片描述align-items: flex-end;

      .flex-container {
                align-items: flex-end;
                -webkit-align-items: flex-end;
            }
    

    在这里插入图片描述align-items:center;

       .flex-container {
                align-items: center; 
                -webkit-align-items: center;
            }
    

    在这里插入图片描述align-items: baseline;

    
    .flex-container {
      -webkit-align-items: baseline; /* Safari */
      align-items:         baseline;
    }
    

    所有项目的基线会对齐
    在这里插入图片描述基线?不知道基线是什么请戳这里–>基线是什么?


    ⭐04:align-content;

    !注意:这个属性仅仅当容器中有多行的项目时有效,如果所有项目仅仅占一行,那这个属性对布局没有任何影响。

    align-content堆栈(由flex-wrap产生的独立行)对齐
    align-content: strech每一行的项目后面等比例分配了侧轴上多余空间
    align-content:flex-start项目在容器的侧轴起始点上堆放在一起
    align-content: flex-end项目在容器的侧轴结束点上堆放在一起
    align-content : center项目的行被堆放在容器的交叉轴中间
    align-content: space-between与justify-content类似,项目的行距离在容器的交叉轴线上被等分,第一行和末尾的一行与容器的边缘对齐。
    align-content: space-around与justify-content类似,项目的行等分了容器的交叉线上的剩余空间,第一行和最后一行同样也得到了一些,它们之间的间隔比首行和末行到容器边界的间隔大一倍。
     align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);
    

    当交叉轴上还有多余的空间时它定了多行的对齐方式,类似justify-content在主轴上对齐所有项目的方式一样。

    align-content:strech;

      .flex-container {
                flex-wrap: wrap;
                align-content: stretch;
            }
    

    在这里插入图片描述
    align-content: flex-start;

        .flex-container {
                flex-wrap: wrap;
                -webkit-align-content: flex-start;/* Safari */
                align-content: flex-start;
            }
    

    在这里插入图片描述
    align-content: flex-end;

       .flex-container {
                flex-wrap: wrap;
                -webkit-align-content: flex-end; /* Safari */
                align-content: flex-end;
            }
    

    在这里插入图片描述
    align-content: center;

       .flex-container {
                flex-wrap: wrap;
                -webkit-align-content: center; /* Safari */
                align-content: center;
            }
    

    在这里插入图片描述在这里插入图片描述
    align-content: space-between; 两端对齐

        .flex-container {
                flex-wrap: wrap;
                align-content: space-between;
            }
    

    在这里插入图片描述
    align-content: space-around; 均分对齐

        .flex-container {
                flex-wrap: wrap;
                align-content: space-around;
            }
    

    在这里插入图片描述


    ⭐05:flex-wrap

    flex-wrap控制是否换行
    flex-wrap:wrap;将项目排列多行
    flex-wrap: no-wrap;(默认)将项目排列一行默认
     flex-wrap:nowrap(默认值) | wrap | wrap-reverse;
    

    初始情况下,Flexbox的理念是所有的项目都排列在一条线上(轴线),flex-wrap 属性控制容器是否将它的项目排列在一行或者多行,并且控制新行堆叠的方向。
    values:

    
    .flex-container {
      -webkit-flex-wrap: nowrap; /* Safari */
      flex-wrap:         nowrap;
    }
    

    flex项目会排列在一条线上并且它们会缩放适应到容器的宽。在这里插入图片描述

        .flex-container {
          -webkit-flex-wrap: wrap; /* Safari */
          flex-wrap:         wrap;
        }
    

    项目(flex items)会在多行展示,如果需要的话它们可以从左到右或者从上到下排列。在这里插入图片描述

    
    .flex-container {
      -webkit-flex-wrap: wrap-reverse; /* Safari */
      flex-wrap:         wrap-reverse;
    }
    

    在这里插入图片描述


    06: flex-flow
    该属性是上面两个属性的简写方式,前一个参数设置flex-direction,后一个参数设置flex-wrap;
    values:

    
    .flex-container {
      -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
      flex-flow:         <flex-direction> || <flex-wrap>;
    }
    

    默认值: row nowarp


    4.flex项目属性

    01:order属性

    order属性控制容器的直接子元素在容器中的顺序,默认在容器中这些项目是以数字递增的方式排列的。
    values:

    values:
    .flex-item {
      -webkit-order: <integer>; /* Safari */
      order:         <integer>;
    }
    

    该属性可以很简单的控制项目的顺序,而不用在HTML代码里面做调整。这个整形值可以为负数,默认值是 0。
    在这里插入图片描述
    02: flex-grow: number;

    该属性指定项目的生长因素,它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。
    values:

    
    .flex-item {
      -webkit-flex-grow: <number>; /* Safari */
      flex-grow:         <number>;
    }
    

    在这里插入图片描述当所有的项目的flex-grow值相等的时候它们的size相同。
    在这里插入图片描述第二个项目占用了更多的剩余空间。
    默认值是:0
    注意:负数在这个属性中是没有用的

    03:flex-shink:;

    该属性指定了项目的收缩因素,它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

    values:

    
    .flex-item {
      -webkit-flex-shrink: <number>; /* Safari */
      flex-shrink:         <number>;
    }
    

    在这里插入图片描述
    默认情况下,所有的项目都会收缩,但是当我们设置该属性的值为0的时候,项目会保持原有的大小。

    默认值是:1
    注意:负数在这个属性中是没有用的

    04:flex-basis: auto | width

    该属性的值和width和height的取值一样,在 flex factors分配剩余空间之前指定项目的初始的大小。

    values:

    
    .flex-item {
      -webkit-flex-basis: auto | <width>; /* Safari */
      flex-basis:         auto | <width>;
    }
    

    在这里插入图片描述
    默认值:auto

    05:

    flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
    

    该属性是flex-grow, flex-shrink 和flex-basis的缩写形式,同时属性值也有简写:auto表示(1,1,auto),none表示(0,0,auto)

    values:

    
    .flex-item {
      -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
      flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
    }
    

    注意: W3C鼓励使用flex的简写形式,因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

    ⭐06:align-self;

    **align-self:auto | flex-start | flex-end | center | baseline | stretch;**
    

    该属性和容器的align-items属性有同样的作用,它是用在单一的项目上的,可以完全压倒容器中align-items定义的对齐方式。
    values:

    
    .flex-item {
      -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
      align-self:         auto | flex-start | flex-end | center | baseline | stretch;
    }
    

    在这里插入图片描述
    注意:auto 表示项目会使用父元素(容器)的align-items的值,如果该项目没有父元素的话align-self的值是stretch。

    flex items值得注意的是:float、clear、vertical-align这些属性对于项目(flex item)会失效。

    文章部分图片和素材来自Flex布局Flexbox属性详解

    展开全文
  • flex 伸缩布局

    2019-09-07 21:43:17
    1、设置伸缩布局 display: flex; 2、设置固定宽度 flex-basis flex-basis: 值; 3、弹性盒子实现多行排列 flex-wrap... // nowrap 默认不换行 // wrap 换行 4、设置水平方向对齐方式 justify-content justify-co...
    1、设置伸缩布局
     display: flex;
    
    2、设置固定宽度 flex-basis
    flex-basis: 值;
    
    3、弹性盒子实现多行排列 flex-wrap
    flex-wrap : nowrap;    
        //   nowrap  默认不换行
        //   wrap    换行
    
    4、设置水平方向对齐方式 justify-content
    justify-content:    flex-start;     居左对齐
    justify-content:    flex-end;       居右对齐
    justify-content:    center;         居中对齐
    justify-content:    space-around;   空白环绕分布
    justify-content:    space-between;  空白空间平均分布
    
    常用:  space-around、center
    1) space-around  在单行的情况下,视觉效果好
    2)在多行时,常用  flex-start
    
    5、设置垂直方向对齐方式 align-items( 设置单行中盒子的垂直对齐方式)
    align-items:    flex-start;     在单行中垂直方向上顶部对齐
    align-items:    center;     单行中盒子居中对齐
    align-items:    flex-end;   在单行中垂直方向上底部对齐
    align-items:    stretch;    默认,当盒子内有高度时,将盒子拉伸到最大
    align-self:...  自己在垂直方向上的对齐方式
    
    6、改变主轴方向 flex-direction
    flex-direction:     column;         主轴向下
    
    #  设置侧轴多行内容对齐方式同水平对齐方式相同
    align-content:  flex-start;         居左对齐
    align-content:  flex-end;
    align-content:  center;
    align-content:  space-around;
    align-content:  space-between;
    

    注意: 调整主轴方向,可以纵向排布盒子

    展开全文
  • flex伸缩布局知识总结

    2021-01-13 16:33:23
    flex伸缩布局传统布局和flex伸缩布局的区别?父项属性flex-direction主轴方向flex-wrap是否换行justify-content主轴排列方式align-items侧轴排列方式(单行)align-content侧轴排列方式(多行)子项属性order排列...
  • Flex伸缩布局

    2021-05-26 20:13:50
    Flex伸缩布局 (一)flex布局原理 Flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的活性,任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后,子元素的float、clear和...
  • flex弹性伸缩布局笔记

    2017-06-20 15:23:24
    html> html> head lang="en"> meta charset="UTF-8"> title>title> head> style> .holyGrail{ display: flex; min-height: 100vh; flex-direction: column; height:70p
  • flex伸缩布局

    2018-04-29 00:17:42
    伸缩布局(CSS3新布局flex) .box { display: flex;/*使box盒子为伸缩布局*/ } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伸缩布局使得块级元素的布局排列变得十分灵活,适应性非常强,它...
  • flex伸缩布局知识点

    2020-08-20 14:03:41
    flex-direction属性justify-content属性(主轴上的对齐方式)align-items(侧轴上的对齐方式)flex-wrap(如何换行)align-content(控制换行后的对齐方式)flex-flow设置给伸缩项的属性align-self(单独控制伸缩项在侧...
  • display:flex 弹性伸缩布局详解

    千次阅读 2017-07-27 17:11:24
    它对于那些特殊布局非常方便,比如,垂直居中就容易实现。 一、Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。...
  • Flex伸缩盒子的实操+详解——flex-wrap属性 flex-wrap属性定义,如果项目在一条轴线上排下的话,如何进行换行,或者选择不换行。 flex-wrap属性定义了三种值,分别是: nowrap (默认值) 如果排进行换行 ...
  • 该属性应用在伸缩容器上,从而确定了伸缩容器的主轴的方向,以至于为伸缩项目的布局做好准备。改变的是主轴的方向对于伸缩容器的宽高不会改变,不如column不会意味着宽和高数值交换。 该属性中row等值与文本的书写...
  • html之flex伸缩盒子

    2020-12-13 22:11:54
    flex伸缩盒子 利用flex伸缩盒子可以把父级下的div的换行去掉,排列在一行中 demo来自微信小程序 先将父级div定义成伸缩盒子,然后子级每份占据1份父类空间
  • FLEX伸缩布局资料

    2021-03-23 10:00:18
    1.FLEX伸缩布局资料 常见父元素 flex-direction 设置主轴方向 justify-content 设置主轴上的子元素排列方式 flex-wrap 设置子元素是否换行 align-items 设置侧轴子元素的排列方式 (单行) align-content ...
  • Flex伸缩盒子的实操+详解——flex-wrap属性 flex-wrap属性定义,如果项目在一条轴线上排下的话,如何进行换行,或者选择不换行。 flex-wrap属性定义了三种值,分别是: nowrap (默认值) 如果排进行换行 ...
  • flex伸缩布局之九宫格

    万次阅读 2018-08-23 22:36:58
    今天做微信小程序的时候,在布局的时候遇到了很大的麻烦,flex... 首先对基本属性做个简单的介绍,display:flex将盒子转为伸缩盒子,flex-wrap控制当前盒子的内部元素的是否换行(no-wrap不换行, wrap换行, wrap-r...
  • 默认的取值: flex-wrap 不换行 wrap: 放不下就换行 而不是等比压缩 wrap-reverse: 放不下就换行 , 以行为单位进行反转 */ /*flex-wrap: nowrap;/*默认的,不换行。*/ flex-wrap: wrap;/*放不下就换行 而不是...
  • VUE-flex布局之flex-wrap换行(3)

    千次阅读 2019-06-10 15:56:06
    1、外部容器display:flex; 可以设置的6个属性,如下: flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左)...
  • 前端知识-flex伸缩布局

    千次阅读 2021-01-17 14:19:41
    使用方式 1.父元素display:flex; 排列方式 主轴排列方向 flex-direction: column/...flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 justify-content 主轴元素对齐方式 align-i
  • 文章目录一、背景介绍二、伸缩容器概念2.1、概念介绍2.2、排列:三、伸缩容器属性详解(父元素上)3.1、flex-direction伸缩布局的排列方式 (给父元素设置)3.2、flex-wrap属性控制是否换行(给父元素设置)flex-flow...
  • 弹性布局(flex布局、伸缩布局) 一、什么是弹性布局 flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局 注:当我们为父盒子设置弹性布局后,子...
  • 伸缩布局(flex) 1.1 伸缩布局简介 伸缩布局是一种CSS3的新布局方式,又叫弹性布局,不同于传统的块级元素布局,伸缩布局是一种在容器里面通过设置容器的属性,进而对容器里面的数据进行自适应伸缩布局的一种方式...
  • 布局 - Flex伸缩布局

    2020-05-01 17:51:15
    布局原理 flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活...伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局 采用Flex布局的元素,称为Flex容器,简称“容器”。它的所...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,859
精华内容 1,543
关键字:

flex不伸缩不换行