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

    2020-07-13 08:40:20
    关于弹性布局flex的注意事项 设置了弹性布局后display:flex;其子元素的浮动float、clear、和vertical-align会失效。 在没有设宽高的盒子加弹性布局后,会影响默认盒子的宽高度。

    关于弹性布局flex的注意事项

    1. 设置了弹性布局后display:flex;其子元素的浮动float、clear、和vertical-align会失效。
    2. 在没有设宽高的盒子加弹性布局后,会影响默认盒子的宽高度
    3. 使用justify-content: space-between;时一定要给它设宽度,不然会没有效果,交叉轴aligin-item: center;一样需要设高度。
    4. 居中也可以直接给弹性子盒子margin: auto;那么子元素块就会水平垂直居中啦!
    	.fa {
                width: 500px;
                height: 500px;
                background-color: #f0f;
                margin: 100px auto;
                display: flex;
            }
            .son {
                width: 200px;
                height: 200px;
                background-color: #0f0;
                margin: auto;
            }
    

    效果图:
    在这里插入图片描述

    展开全文
  • 弹性布局 flex

    2020-03-29 18:09:37
    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。 弹性布局 flex 是CSS中 display 的一个属性值,通过在父容器...

    1、flex布局是什么?

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。

    弹性布局 flex 是CSS中 display 的一个属性值,通过在父容器上添加 display:flex; 属性,便可以实现其子元素在父元素中的弹性布局。

    但要注意的是 display:flex; 这一条样式只会作用在添加这一属性的父容器和非隔代子容器上,换句话说,父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。通俗的话就是:爹只能管得到自己的儿子、而管不到自己的孙子。如果想要在下一层中继续使用弹性布局,我们可以在相应的子元素上再次添加 display:flex; 属性来实现

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

    2、容器的属性

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

    2.1 flex-direction 属性

    flex-direction属性 决定主轴的方向(即项目的排列方向),可以简单的将多个元素的排列方向从水平方向改为垂直方向,或者反之。

    其有四个属性值:

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

    语法格式:

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

    对应的样式如图:
    在这里插入图片描述

    千万不要单单把“主轴”与“水平正向”划等号,虽然说在CSS中规定的默认值是这样的。而交叉轴表示的就是与主轴垂直的那条轴线。

    2.2 flex-wrap 属性

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

    能取三个值:

    语法格式:

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

    (1)nowrap(默认):内容在单行显示,不进行换行

    在这里插入图片描述

    (2)wrap:多行显示,会进行换行,第一行在上方。

    在这里插入图片描述

    (3)wrap-reverse:多行显示,会进行换行,第一行在下方。

    在这里插入图片描述

    2.3 flex-flow 属性

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

    语法格式:

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

    2.4 justify-content 属性

    justify-content属性定义了项目 在主轴上的对齐方式

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

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

    语法格式:

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

    对应的样式如图:
    在这里插入图片描述

    2.5 align-items 属性

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

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

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

    语法格式:

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

    对应的样式如图:在这里插入图片描述

    2.6 align-content 属性

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

    语法格式:

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

    该属性可能取6个值:

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

    对应的样式如图:
    在这里插入图片描述

    3. 项目的属性

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

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

    3.1 order 属性

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

    语法格式:

    .item {
      order: <integer>;
    }
    

    样式效果如图:
    在这里插入图片描述

    3.2 flex-grow 属性

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

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

    样式如图:
    在这里插入图片描述
    如果所有项目的 flex-grow属性都为1,则它们将等分剩余空间(如果有的话)
    如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

    3.3 flex-shrink 属性

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

    语法格式:

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

    样式如图:
    在这里插入图片描述
    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
    如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    负值对该属性无效。

    3.4 flex-basis属性

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

    语法格式:

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

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

    3.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)

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

    3.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 布局教程:语法篇 - 阮一峰

    展开全文
  • 弹性布局Flex

    2020-03-05 14:53:42
    Flex布局:弹性布局 flex布局的使用 任何一个容器都可以指定为Flex布局,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效 .container{ display: flex; } 行内元素也可以使用flex布局 ....

    Flex布局:弹性布局

    flex布局的使用

    任何一个容器都可以指定为Flex布局,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效

    .container{
        display: flex;
    }
    

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

    .container{
        display: inline-flex;
    }
    

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

    .container{
        display: -webkit-flex;
    }
    

    flex布局的概念

    flex容器(flex container):采用Flex布局的元素
    flex项目(flex item):容器的子元素自动成为容器成员
    水平的主轴(main axis):项目默认沿主轴排列
    垂直的交叉轴(cross axios)
    主轴的开始位置(main start):与边框的交叉点;结束位置(main end)
    交叉轴的开始位置(cross start);结束位置(cross end)
    单个项目的主轴空间为 main size,交叉空间为cross size
    在这里插入图片描述
    (上图为方便下次复习,自己画的)

    flex布局的属性

    1. flex-direction(决定主轴的方向,即项目的排列方向)
      row:从左到右,主轴为水平方向
      row-reverse:从右到左,主轴为水平方向
      column :从上到下,主轴为垂直方向
      column-reverse:从下到上,主轴为垂直方向
     .container{
        flex-direction: row | row-reverse | column | column-reverse;
      }
    
    1. flex-wrap(若一条轴线排不下,如何换行)
      nowrap(默认):不换行 wrap:换行,第一行在上面
      wrap-reverse:换行,第一行在下面
      在这里插入图片描述
     .container{
        flex-wrap: nowrap | wrap | wrap-reverse;
      }
    
    1. flex-flow(lex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap)
    2. justify-content(定义了项目在主轴上的对齐方式)
      flex-start(默认):左对齐
      flex-end :右对齐
      center :居中对齐
      space-between:两端对齐,项目之间的间隔都相等。
      space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
     .container {
        justify-content: flex-start | flex-end | center | space-between | space-around;
      }
    
    1. align-items(定义项目在交叉轴上如何对齐)
      flex-start:交叉轴的起点对齐。
      flex-end:交叉轴的终点对齐。
      center:交叉轴的中点对齐。
      baseline: 项目的第一行文字的基线对齐。
      stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
    
     .container {
        align-items: flex-start | flex-end | center | baseline | stretch;
      }
    
    1. align-content(定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。)
      flex-start:与交叉轴的起点对齐。
      flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。
      space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
      space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
      stretch(默认值):轴线占满整个交叉轴。
     .container {
        align-content: flex-start | flex-end | center | space-between | space-around | stretch;
      }
    
    

    项目的属性

    1. order(属性定义项目的排列顺序。数值越小,排列越靠前,默认为0)
     .item {
        order: <integer>;
      }
    
    1. flex-grow(定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大)
      .item {
        flex-grow: <number>; 
      }
    
    1. flex-shrink(定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小)
      .item {
        flex-shrink: <number>; /* default 1 */
      }
    
    1. flex-basis(在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。)
      .item {
       flex-basis: <length> | auto; /* default auto */
      }
    
    1. flex(flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。)
      .item {
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
      }
    
    1. align-self(允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch)
      .item {
         align-self: auto | flex-start | flex-end | center | baseline | stretch;
      }
    

    本文参考:阮一峰老师的flex布局文档

    展开全文
  • 弹性布局flex布局、伸缩布局) 一、什么是弹性布局 flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局 注:当我们为父盒子设置弹性布局后,子...

    弹性布局(flex布局、伸缩布局)

    一、什么是弹性布局

    flexflexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局

    注:当我们为父盒子设置弹性布局后,子元素的 floatclearvertical-align 属性将失效

    .box{
      display: flex;
    }
    .box{
      display: inline-flex;
    }
    /*Webkit 内核的浏览器,必须加上-webkit前缀。*/
    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    

    二、布局原理

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

        <style>
            div{
                display: flex;
                width: 800px;
                height: 300px;
                background-color: green;
                justify-content: space-around;
                align-items: center;
            }
            div span{  
            	width: 240px;
                height: 150px;
                background-color: greenyellow;
            }
        </style>
    </head>
    <body>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
    

    在这里插入图片描述

    flex布局的原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式

    三、父容器常见属性

    1. flex-direction 设置主轴方向(即项目的排列方向)

    在flex布局中,是分为主轴和交叉轴两个方向

    • 默认主轴方向就是x轴方向,水平向右
    • 默认交叉轴方向就是y轴方向,水平向下

    主轴方向是可以通过flex-direction设置的,交叉轴始终垂直主轴。

    属性值 说明
    row(默认值) 主轴为水平方向,起点在左端(从左到右)
    row-reverse 主轴为水平方向,起点在右端(从右到左)
    column 主轴为垂直方向,起点在上沿(从上到下)
    column-reverse 主轴为垂直方向,起点在下沿(从下到上)

    2. justify-content 设置项目在主轴上的排列方式

    属性值 说明
    flex-start(默认值) 从头部开始(如果x是主轴,则从左到右)
    flex-end 从尾部开始排列
    center 在主轴居中对齐(如果主轴是x,则水平居中)
    space-around 平分剩余空间
    space-between 先两边贴边 再平分剩余空间(最常用)

    图示:为了看得更方便加了边框

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

    3. flex-wrap 设置项目是否换行

    默认情况下,项目都排在一条轴线上,flew-wrap属性定义,flex布局中默认是不换行的,如果装不下会缩小子元素的宽度

    属性值 说明
    nowrap 默认值,不换行
    wrap 换行
    wrap-reverse 换行,第一行在下方

    4. align-items 设置交叉轴上的子元素排列方式

    假设交叉轴从上到下;在子项为单行的时候使用

    属性值 说明
    flex-start(默认值) 交叉轴的起点对齐(从上到下)
    flex-end 交叉轴的终点对齐(从下到上)
    center 交叉轴的中点对齐(挤在一起居中)
    stretch 如果项目未设置高度或设为auto,将占满整个容器的高度(拉伸)
    baseline 项目的第一行文字的基线对齐

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

    5. align-content 设置交叉轴上的子元素排列方式(多行)

    设置子项在交叉轴排列方式并且只能用于多行子项(单个项有宽度,一行放不下时,换行:flex-wrap:wrap;),单行子项下是没有效果的

    属性值 说明
    flex-start(默认值) 在交叉轴的头部开始排列
    flex-end 在交叉轴的尾部开始排列
    center 在交叉轴中间显示
    space-around 子项在交叉轴平分剩余空间
    space-between 子项在交叉轴先分部在两头,在平分剩余空间
    stretch 设置子项元素高度平分元素高度

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

    在这里插入图片描述

    align-items和align-content区别
    • align-items适用于单行的情况下
    • align-content适用于多行(子项有宽度一行放不下换行时)的情况(单行是无效的)

    6. flex-flow 复合属性

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

    .box {
      flex-flow: row wrap;
    }
    

    总结

    • flex-direction:设置主轴方向
    • justify-content:设置主轴上的子元素排列方式
    • flex-wrap:设置子元素是否换行
    • align-items:设置交叉轴上的子元素的排列方式(单行)
    • align-content:设置交叉轴上的子元素的排列方式(多行)
    • flex-flow:复合属性,flex-direction属性和flex-wrap属性的简写形式

    四、子项常见属性

    1. flex属性

    ​ flex属性定义子项分配剩余的空间,用flex来表示占多少份数

    在这里插入图片描述

    2. align-self属性

    ​ 控制子项这在侧轴上的排列方式,允许单个项目与其他的项目有不一样的对齐方式。可覆盖align-items属性。

    ​ 默认值是auto,表示基础父元素的align-items属性,如果没有父元素,则等同于stretch。

    3. order属性

    ​ 数值越小,排列越靠前,默认为0(通过css oder属性调整盒子的位置)

    4. flex-grow属性

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

    5. flex-shrink

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

    6. flex-basis

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

    展开全文
  • css布局之弹性布局flex

    2019-10-24 13:54:36
    作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局。 2.弹性布局的定义和属性 弹性布局是定义在一个父容器中,加上display:flex样式使父容器的布局方式...
  • Bootstrap弹性布局Flex

    2020-07-28 20:29:41
    弹性布局Flex一、Flex1.弹性盒模型2.子元素的排列方向3.子元素的对齐方式4.自对其5.填满6.伸缩7.自动的间距8.wrap包裹9.order排序10.多行对齐 一、Flex 1.弹性盒模型 启用弹性盒模型 <div class="row"> &...
  • 弹性布局flex(弹性盒子) 下面是弹性布局flex不用学习,直接粘贴使用: 首先开启弹性布局flex: display:block; 开启弹性布局flex 设置内容排列: flex-direction: row; 内容从左到右(默认样式) ...
  • 弹性布局flex属性详解 弹性布局里的flex属性主要用于容器里子元素的空间分配,flex属性有三个属性值,分别为flex-grow,flex-shrink,flex-basis 语法 flex: none | [ <‘flex-grow’> <‘flex-shrink’>?...
  • 弹性布局 flex 优点:弹性布局使得父元素的子元素自动弹开,无需设置间隙。 节省大量时间。 父元素(容器) 子元素(项目) 简单使用 父元素中 { display:flex; flex-flow:<方向> <换行方式>; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,570
精华内容 2,628
关键字:

弹性布局flex