展开

关键词

深入理解Flex布局 -- flex-grow & flex-shrink & flex-basis

它其实是一个缩写,等价于flex: 1 1 0,也就是 flex-grow : 1; flex-shrink : 1; flex-basis : 0; flex-grow 表示当有剩余空间的时候,分配给项目的比例 flex-shrink 表示空间不足的时候,项目缩小的比例 flex-basis 表示分配空间之前,项目占据主轴的空间 下面来讲讲 flex 空间分配的步骤。 首先要理解清楚,当我们定义一个固定宽度容器为flex的时候,flex会尽其所能不去改变容器的宽度,而是压缩项目的宽度。 codepen 在这里 flex-basis(默认值 auto) flex-basis指定项目占据主轴的空间,如果不设置,则等于内容本身的空间: 四、总结 本文从问题出发,讲解了Flex布局在实战中的应用 ,并深入到flex-grow,flex-shrink和flex-basis的细节,描述了项目空间在填充和溢出情况下的计算方式,希望对你有所帮助。

8020

flex-grow、flex-shrink、flex-basis详解

flex-grow、flex-shrink、flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的。 其中,这三个属性都是在子元素上设置的。 注:下面讲的父元素,指以flex布局的元素(display:flex)。 flex-basis 该属性来设置该元素的宽度。当然,width也可以用来设置元素宽度。 如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。 如果A,B都不减小宽度,即都设置flex-shrink为0,则会有100px的宽度超出父元素。 如果A不减小宽度:设置flex-shrink为0,B减小。 & flex-shrink & flex-basis。

41040
  • 广告
    关闭

    一大波轻量级工具升级重磅来袭

    代码传递思想,技术创造回响!Techo Day热忱欢迎每一位开发者的参与!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Flex布局

    属性将失效 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。 flex-direction flex-wrap flex-flow justify-content align-items align-content 1 flex-direction属性 flex-direction 3 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 order flex-grow flex-shrink flex-basis flex align-self 1 order属性 order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。 5 flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

    28810

    Flex布局

    Flex布局 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 常见的父项属性 flex-direction设置主轴方向 默认主轴是水平的x轴 主轴和侧轴是会变化的, flex-direction 则左到右 flex-end 从尾开始 center 主轴居中对齐 space-around 平分剩余空间 space -between 先两边贴边,再平分剩余空间 flex-wrap设置是否换行 flex-wrap 则左到右 flex-end 从尾开始 center 居中对齐 stretch 拉伸 align-content 设置侧轴上的子元素的排列方式(多行) 子项中出现换行wrap,才有效果 属性值 说明 flex-start 在侧轴的头部开始排列 flex-end 侧轴尾部开始排列 center 侧轴居中对齐 space-around 子项在侧轴平分剩余空间 space -between 侧轴先分布在两头,再平分剩余空间 stretch 子项元素高度平分父元素高度 单行用align-items 多行用align-content 常见的子项属性 flex属性 分配剩余空间,用flex来表示占多少份数 align-self

    7310

    Flex布局

    于是2009年的时候w3c提出了flex布局,也叫弹性布局,可以更简单的实现响应式和一些特殊布局。 ? 现在的主流浏览器几乎都兼容了flex布局,连IE只要是10+的都兼容。 IOS的话具体兼容到哪一个版本不知道,但是开发到现在还没遇见不兼容的,所以flex可以放心使用。要是有IE8等用户,我建议是给个提示去升级吧。 先说说横向的布局,当你使用了flex之后,align-items是控制上下方向的,center是上下居中、flex-end是下边对齐、flex-start是向上对齐。 如果你需要的还是竖向的排列,又想用flex的上下居中或者左右布局,那么设置flex-direction: column,这时候就是竖向布局。 项目开发中,flex布局一般就用这几个属性,只要写几个div或者ul li就很容易上手,尤其是对于APP,只要宽度百分比加flex布局,几乎就可以做到百分之90的自适应。

    17330

    display:flex

    list-style: none; width: 600px; border: 1px solid red; margin: 100px auto; display: flex flex-direction 属性值有:; row:默认的,从左到右的排列; row-reverse:与row相反的,起点在右边,终点在左边 从右至左的排版; column:起点在顶部 list-style: none; width: 600px; border: 1px solid red; margin: 100px auto; display: flex ; flex-direction: column-reverse; } ul>li{ width: 100px; height: 100px : flex-start;/*默认的*/ /* justify-content: flex-end;/*主轴方向是默认的,然后是对齐方式是到end的地方左往右的对齐把.*/ /

    15610

    flex 布局

    flex 是 flexible box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性 基本概念 采用 flex 布局的元素称为 ==flex 容器==,容器的直接子元素称为 ==flex 项目 为 row,则主轴是水平方向,如果是 column,则主轴是垂直方向 [vbx2puz3kw.jpeg] flex 属性 将任意元素的 display 属性设置为 flex,可将其转换为Flex容器 设为 flex 容器后,子元素的 float、clear 和 vertical-align 属性将失效 flex 容器属性 属性名描述 属性名 参数 主轴方向 flex-direction row(水平排列 (反向换行,第一行在最后面) 上面两个属性的简写 flex-flow row nowrap(默认值) 主轴对齐方式 justify-content flex-start(起点对齐,默认);flex-end ,并不是所有的浏览器、webview、微信等各种版本都支持标准的 flex,但是基本上都会支持-webkit-box,所以 flex.css 的主要作用是保证每一个属性都能支持标准 flex 或旧版本的

    50420

    flex布局

    参考阮一峰前辈的教程:flex布局语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html,flex布局实例篇:http://www.ruanyifeng.com /blog/2015/07/flex-examples.html 下面几张图片作了一些备注: 1. ?

    27620

    Flex HTTPService

    URL中如果使用&符号应写成& 例如上面的示例就应将url中内容改为http://hello.api.235dns.com/api.php?code=xml...

    13610

    flex布局方法详解之flex-direction

    首先声明,本文参考了阮一峰老师的博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 本文结合微信小程序 来对flex布局做一个说明 本节重点讲解一下flex的布局方式。 新建一个页面: ? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 比如,你可以给一个DIV元素设置布局方式为flex,在微信小程序开发中,我们一般给view组件设置为flex布局。 Flex容器有多个属性。 我们在此可以采用flex技术。 首先,给box设置为flex盒子: ? 发现一件好玩的事情,三个view排在一排了。 现在,有请我们今天上场的第一位嘉宾: flex-direction , 掌声欢迎! flex-direction 属性决定主轴的方向(即子元素的排列方向)。

    33240

    Flex开发实战(一)--Flex的详细介绍

    什么是Flex Flex is a powerful, open source application framework that allows you to easily build mobile Flex 是可以使用免费的 Flex SDK 构建 Flex 应用程序。 3. Flex涵盖了支持RIA(Rich Internet Applications)的开发和部署的一系列技术组合。 Flex是怎么工作的 Apache Flex is comprised of a few different components. Flex是有多种不同的组件组成的。其中一个组件是可以把MXML(Flex标记语言)和ActionScript件输出一个SWF文件的应用程序。 优势 通过上面的介绍,我们了解到Flex非常的强大,而且做富客户端互联网技术的佼佼者,Flex已经被越来越多的公司采用,被越来越多的用户和程序猿(媛)所接收。

    47810

    FLEX布局

    FLEX布局 FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。 基础 通过指定display: flex来标识一个弹性布局盒子,称为FLEX容器,容器内部的盒子就成为FLEX容器的成员,容器默认两根轴线,水平的主轴与垂直的交叉轴,主轴的开始位置叫做main start flex-wrap: wrap; } </style> flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认row nowrap ,取值为flex-start | flex-end | center | space-between | space-around flex-start默认值:左对齐 flex-end:右对齐 center flex-grow, flex-shrink和flex-basis的简写,默认值0 1 auto。

    26620

    Flex布局

    *Firefox*/ display:flex; } 基本概念 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 flex-shrink flex-basis flex align-self order属性 order属性定义项目的排列顺序。 flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 .item { flex: none | [ <'flex-grow'> <'flex-shrink'>?

    48730

    flex布局方法详解之flex-wrap

    首先声明,本文参考了阮一峰老师的博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 本文结合微信小程序 来对flex布局做一个说明 问题2:假如一个flex盒子里面有N多个view,会咋样? ? ? ? 呀呀呀,这可咋整,咋不换行呢? 尊敬的各位领导,各位同学,女士们,先生们。接下来,我们要介绍一位重量级的嘉宾。 为了解决flex盒子中子元素过多而换不了行的问题,这位嘉宾可是做出了卓越的贡献,他就是 -- flex-wrap ! 它可能取三个值。 (1)nowrap(默认):不换行。 刚刚的那种情况就是 flex-wrap: nowrap 的情况。 (2)wrap:换行,第一行在上方。 ? ? (3)wrap-reverse:换行,第一行在下方。 ?

    73730

    flex-grow flex-shrink注意点

    height: 600px; border: 1px solid #000; margin: 100px auto; display: flex ; flex-direction: column;/*主轴是垂直方向的*/ } ul>li{ width: 100px; 属性, 或者flex-grow:的值是0, 那么当前的伸缩项不会被扩充 2.如果flex-shrink的值是0, 那么当前的伸缩项不会被缩小 3. ; flex-grow: 4; /*flex-shrink: 4;*/ } ul>li:nth-child(3){ background: blue; flex-grow: 8; /*flex-shrink: 8;*/ } </style> </

    13910

    Flex 源码解读

    你能通过源码看见 Row 和 Column 都继承了 Flex ,布局具体的计算都在这个类中,我们可以通过源码 github.com/flutter/flut 了解一下 Flex 是如何计算布局的。 Flex 构造函数 Flex({ Key key, @required this.direction, this.mainAxisAlignment = MainAxisAlignment.start , this.textBaseline, List<Widget> children = const <Widget>[], }) 基本上默认值的设计不管是 Row 还是 Column 都遵循了 Flex 通过逻辑可以分析出通过_getFlex计算出flex的值,flex 值存在然后去找到最后一个存在 flex 值的 child,对于不包含 flex 值的 child 则设置它们的对齐方向。 maxMainSize : 0.0) - allocatedSize); 开始去计算包含 flex 的空间大小,然后根据 CrossAxisAlignment.baseline 对 child 进行调整

    44020

    flex-basis

    height: 600px; border: 1px solid #000; margin: 100px auto; display: flex 属性设置伸缩项的宽度 注意点: flex-basis 只有在伸缩布局中才有效 2.在伸缩布局中如果通过flex-basis设置了宽度, 那么再通过width设置宽度就会无效 也就是说flex-basis的优先级要高于width的优先级 3.在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是auto,一个设置的是具体的值 , 那么会按照具体的值来显示 */ /*flex-basis: 100px;*/ /*width: 200px;*/ /*width: auto;*/ /*width: 200px;*/ /*flex-basis: auto;*/ flex-basis: auto; width

    17410

    弹性布局flex-grow和flex-shrink

    超低版本安卓有一些兼容性问题,但是总会出现一些奇奇怪怪的问题,比如横向排列的时候,其中的一个icon 元素会被截断,因为没有设固定宽度,之前是通过设定min-width,max-width来解决的,今天重新理了下flex 二、基本概念理解 flex-grow:控制剩余空间是否放大,默认0,剩余也不放大,适合不确定文字数量自适应宽度 flex-shrink:控制空间不够的时候是否缩小,默认1,即如果空间不够则缩小,可以正常展示全该展示的东西 ,比如icon、图片等,如果设为0,则会出现超出截断的问题 flex-basis :定义了在分配多余空间之前,项目占据的主轴空间(main size)。 它的默认值为auto,即项目的本来大小 flex属性:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 blog/2015/07/flex-grammar.html

    37120

    相关产品

    • 验证码

      验证码

      天御验证码(Captcha)针对网站、APP 开发者提供安全智能的验证码服务,基于腾讯多年技术沉淀,天御验证码最大程度地保护业务安全;同时,便捷的设计减少交互,让开发者不再因验证码难以识别而担心用户流失。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券