精华内容
参与话题
问答
  • css flex

    2019-06-11 13:56:24
    flexflex-grow、flex-shrink、flex-basis的缩写。 flex-grow:用于设置或检索弹性盒的扩展比率。用人话说就是,是其他盒子的几倍。 flex-shrink:用于设置或检索弹性盒的收缩比率。是其他盒子的几分之一。例如...

    flex 是 flex-grow、flex-shrink、flex-basis的缩写。

    • flex-grow:用于设置或检索弹性盒的扩展比率。用人话说就是,是其他盒子的几倍。
    • flex-shrink:用于设置或检索弹性盒的收缩比率。是其他盒子的几分之一。例如:flex-shrink: 3表示是其他盒子的三分之一
    • flex-basis:设置或检索弹性盒伸缩基准值。
    展开全文
  • CSS flex

    2018-03-31 19:26:13
    CSS flexible Box Layout 弹性盒模型针对用户界面设计进行了优化,弹性容器的子元素可以在任何方向上排布。元素可以弹性伸缩。从而使子元素可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出,更好的...

    CSS flexible Box Layout 弹性盒模型

    针对用户界面设计进行了优化,弹性容器的子元素可以在任何方向上排布。元素可以弹性伸缩。

    从而使子元素可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出,更好的适应父元素的大小。

    flex优点:1.便于对齐元素。

    .box {
            /*定义一个flex contianer*/
    	display: flex;
            /*定义主轴方向,row为主轴(行,自上向下),则column为交叉轴*/
            flex-direction:row
    }

    container和主轴属性

    display:flex/inline-flex

    display定义一个flex container。container内所有子元素成为flex items。

    flex-direction:row/column/row-reverse/column-reverse

    flex-direction:定义主轴方向,与主轴垂直的轴,称之为交叉轴。

    控制对齐的属性

    justify-content: 控制所有元素在主轴上的对齐方式

    align-items:控制所有元素在交叉轴上的对齐方式

    align-self : 控制交叉轴上的单个flex item的对齐

    align-content : 控制“多条主轴”的flex items在交叉轴的对齐

    flex items(子元素)属性,

    flex-grow,flex-shrink 可以当作元素填充或收缩的速度大小。

    flex-grow:(如果有多余空间)0,不填充多余空间;正数,按照各子元素的flex-grow数值比例,分配多余空间,进行填充。

    (eg:三个子元素,第一个子元素flex-grow=2,第二个、第三个子元素flex-grow=1, 则多余空间的1/2会被分配给第一个子元素)

    flex-shrink:(如果空间不足)0,不收缩尺寸;正数,按照各子元素的flex-shrink数值比例,收缩不同倍数的尺寸

    flex-basis:子元素的初始尺寸。

    默认为auto。如果值为auto,则浏览器首先检查当前元素是否有一个绝对尺寸属性(width/height)设置,如果有,则使用该绝对尺寸作为flex-basis值。如果当前元素是自适应尺寸(auto-sized),则使用max-content属性尺寸作为该元素大小。即根据该元素内容需要多少空间,就分配多大空间给该元素。如果元素内容为空,则分配的空间大小就是0了。

    flex-grow,flex-shrink,flex-basis可缩写为flex属性。

    flex:initial = flex: 0 1 auto

    flex: auto = flex: 1 1 auto

    flex:none = flex : 0 0 auto


    典型应用场景

    1.导航栏 方便控制元素对齐空间

    nav ul {
      display: flex;
    }
    
    nav li {
      flex: auto ;
    }

    2.元素居中

    .box {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .box div {
      width: 100px;
      height: 100px;
    }
    <div class="box">
      <div></div>
    </div>

    3.固定位于container底部的footer元素

    .card {
        display: flex;
        flex-direction: column;
    }
    
    .card .content {
        flex: 1 1 auto;
    }

    <div class="cards">
        <div class="card">
            <div class="content">
                <p>This card doesn't have much content.</p>
            </div>
            <footer>Card footer</footer>
        </div>
        <div class="card">
            <div class="content">
                <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
            </div>
            <footer>Card footer</footer>
        </div>
    </div
    不论content内容多少,content自动填充多余空间,footer始终位于container底部。

    4.多媒体元素(我不常用)

    5.表单控制

    .wrapper {
      display: flex;
    
    }
    
    .wrapper input[type="text"] {
        flex: 1 1 auto;
      }
    <form class="example">
            <div class="wrapper">
                <label for="text">Label</label>
                <input type="text" id="text">
                <input type="submit" value="Send">
            </div>
    </form>
          

    参考

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout






    展开全文
  • css flex 弹性布局详解

    2020-09-24 19:15:21
    主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css flex几种多列布局

    2020-09-22 11:07:58
    主要介绍了css flex几种多列布局的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css flex布局

    2020-10-31 00:54:35
    flex-direction 规定主轴方向 row | row-reverse | column | column-reverse flex-wrap 规定item超过一行时如何换行 nowrap | wrap | wrap-reverse flex-flow flex-flow: <flex-direction> || <flex-...
    1. 容器(container)属性
      属性 说明 可能取的值(第一个值为默认值)
      flex-direction 规定主轴方向 row | row-reverse | column | column-reverse
      flex-wrap 规定item超过一行时如何换行 nowrap | wrap | wrap-reverse
      flex-flow flex-flow: <flex-direction> || <flex-wrap> 默认row nowrap
      justify-content 规定item在主轴上如何对齐 flex-start | flex-end | center | space-between | space-around
      align-items 规定item在交叉轴上如何对齐 stretch | baseline | flex-start | flex-end | center
      align-content 规定多根交叉轴的对齐方式 stretch | flex-start | flex-end | center | space-between | space-around |
    2. 项目(item)属性
      属性 说明 可能取的值(第一个值为默认值)
      order 定义item在主轴上的排列顺序(越小越靠前) 0 | <integer>
      flex-grow 定义item的放大比例(与其他设置了该属性的item比较) 0(如果存在空间也不放大) | <integer>
      flex-shrink 定义item的缩小比例(与其他设置了该属性的item比较) 1(如果空间不够item将缩小) | <integer>
      flex-basis 放缩前item占据主轴多少空间(根据这个计算剩余多少空间用于放缩) auto(本来大小) | <integer>
      flex flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 0 1 auto | none(0 0 auto) | auto(1 1 auto) | ...
      align-self 为单个项目设置交叉轴的对齐方式,并覆盖父元素的align-items auto(继承父元素align-items) | stretch | baseline | flex-start | flex-end | center

    阮一峰Flex

    展开全文
  • CSS Flex布局

    2020-05-17 16:55:57
    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性 用法 任何一个容器都可以指定为Flex布局 .box{ display: flex; } 行内元素也可以使用Flex布局 .box{ display: inline-flex; } 设...

    定义

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

    用法

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

    .box{
        display: flex;
    }
    

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

    .box{
        display: inline-flex;
    }
    

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

    概念

    采用Flex布局的元素为Flex容器,容器的所有子元素为Flex项目

    容器有两根轴,主轴(main axis)和交叉轴(cross axis),主轴的开始位置叫做main start,结束位置叫做main end; 交叉轴的开始位置叫做cross start,结束位置叫做cross end

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

    容器的属性

    容器共有6个属性

    1. flex-direction确定主轴方向(即项目的排列方向),默认值为row
    .box{
        flex-direction: row | row-reverse | column | column-reverse
    }
    
    1. flex-wrap定义换行方式,默认值为nowrap
    .box{
        flex-wrap: nowrap | wrap | wrap-reverse
    }
    
    1. flex-flowflex-directionflex-wrap的简写形式,默认值为row nowrap
    2. justify-content定义项目在主轴上的对齐方式,默认值为flex-start
    .box{
        justify-content: flex-start | flex-end | center | space-between | space-around
    }
    
    1. align-items定义项目在交叉轴上的对齐方式,默认值为stretch
    .box{
        align-items: flex-start | flex-end | center | baseline | stretch
        //baseline指项目的第一行文字的基线对齐
        //stretch 如果项目未设置高度或高度为auto时,将铺满整个容器的高度
    }
    
    1. align-content定义了多根轴线的对齐方式。如果项目只有一根轴线,则该属性无效,默认值为stretch
    .box{
        align-content: flex-start | flex-end | center | space-between | space-around |stretch
    }
    

    项目的属性

    项目共有6个属性

    1. order定义项目的排列顺序,数值小的排列靠前,默认为0
    .item{
        order: <integer> //需为整数
    }
    
    1. flex-grow定义项目的放大比例,默认为0
    .item{
        flex-grow: <number>
    }
    
    1. flex-shrink定义项目的缩小比列,默认为1,即如果空间不足,该项目将缩小
    .item{
        flex-shrink: <number>
    }
    
    1. flex-basis定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目的本来大小。它可以设为跟widthheight属性一样的值(比如200px),则项目将占据固定空间
    .item{
        flex-basis: <length> | auto
    }
    
    1. flexflex-growflex-shrinkflex-basis的简写,默认值为0 1 auto,后两个属性可选。

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

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

    2. align-self定义单个项目的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

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

    2020-03-31 17:22:23
    容器 (Container) 列 (Item) https://zhuanlan.zhihu.com/p/25303493 <div id="container" > <div id="item1" /> <div id="item2" /> </div> <...display: flex;...
  • 主要介绍了css Flex布局的可伸缩性(Flexibility)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS flex布局

    2019-10-21 16:59:09
    博主以前经常使用的布局方式是盒子布局,通过父元素与子元素之间的相对positon...弹性容器通过设置display属性的值为flex将其定义为弹性容器。 弹性容器内包含一个或多个弹性子元素。 注意:弹性盒子只定义了弹...
  • CSS flex样式垂直居中

    万次阅读 2019-07-15 00:07:26
    Flex 布局教程:语法篇 问题描述 由于div默认是没有高度的,如果设置了高度,默认是从左到右,从上到下的顺序来排布; 如果要做垂直居中,就需要计算div控件的高度,如果内容变多或者变少,又会导致定位不准确,...
  • css flex弹性盒子

    2020-07-10 18:59:37
    讲真的 我之前用弹性盒子...display: flex 是变成了一个弹性盒子了,就是把块级/或者行变成了弹性盒子元素(在一行展示) .flex { display: flex; flex-direction: row; /**column row-reverse column-reverse */ }
  • css flex布局基础

    2020-05-30 17:19:30
    1:flex 所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容 (块级元素) demo1: ... 蓝色 红色 蓝色 红色 ...css部分: #main { width:220px; border:1px solid black; display:flex;

空空如也

1 2 3 4 5 ... 20
收藏数 10,424
精华内容 4,169
关键字:

css flex