精华内容
下载资源
问答
  • align-items和align-content的区别

    万次阅读 多人点赞 2019-03-05 21:20:15
    文章目录1. stack overflow上的回答(翻译)2. 自己动手实践2.1 子项为单行的情况2.1.1 flex容器不...在用flex布局时,发现有两个属性功能好像有点类似:align-items和align-content,乍看之下,它们都是用于定义f...


    在用flex布局时,发现有两个属性功能好像有点类似:align-itemsalign-content,乍看之下,它们都是用于定义flex容器中元素在交叉轴(主轴为flex-deriction定义的方向,默认为row,那么交叉轴跟主轴垂直即为column,反之它们互调,flex基本的概念如下图所示)上的对齐方式,那么它们之间有什么区别呢?
    本文通过实例代码来对此展开研究(flex-direction默认为水平方向,环境为google浏览器:版本 72),主要分为三部分:
    ① 翻译stack overflow的好的回答。
    ② 自己代码实例展示差别。
    ③ 总结。
    注:本文只限属性取值为center的情况,其他属性值请自己尝试。
    flex基础概念

    1. stack overflow上的回答(翻译)

    详见问题:https://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content

    • justfiy-content属性可应用于所有的flex容器,它的作用是设置flex子项(flex items)在主轴上的对齐方式。不同取值的效果如下所示:
      justify-content
    • align-items属性可以应用于所有的flex容器,它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。不同取值的效果如下所示:
      allign-items
    • align-content 只适用多行的flex容器(也就是flex容器中的子项不止一行时该属性才有效果),它的作用是当flex容器在交叉轴上有多余的空间时,将子项作为一个整体(属性值为:flex-start、flex-end、center时)进行对齐。不同取值的效果如下所示:
      align-content
      实际上,该说法并不是很准确(见第2.3的例子),以下我们通过实例代码来验证一下。

    2. 自己动手实践

    2.1 子项为单行的情况

    初始代码(后面例子的代码中省略了与flex无关且不变的部分,这里使用React,所以是className)如下:

    <div className='flex'>
         <div className='i1'>1</div>
         <div className='i2'>2</div>
         <div className='i3'>3</div>
         <div className='i4'>4</div>
    </div>
    

    对应的CSS:

    .flex {
    	width: 500px;
    	margin: 10px;
    	text-align: center;
    	border: 2px solid #9a9a9a;
    	display: flex; /* 默认的flex-direction为row,则交叉轴方向为column,即垂直方向*/
    }
    .flex div {
    	width: 100px;
    	margin: 5px;
    }
    .i1 {
    	background-color: #ffb685;
    	height: 130px;
    }
    .i2 {
    	background-color: #fff7b1;
    	height: 50px;
    	width: 120px;
    }
    .i3 {
    	background-color: #b1ffc8;
    	height: 100px;
    }
    .i4 {
    	background-color: #b1ccff;
    	height: 60px;
    }
    

    效果如下所示:
    初始状态
    结论:在所有的flex布局中,这里其实有浏览器默认的属性:align-items: normal;align-content: normal;,效果为顶部对齐。

    2.1.1 flex容器不设置高度

    初始状态:

    .flex {
    	display: flex;
    }
    

    效果如下所示:
    单行不设置高度的初始状态
    结论:有默认的属性align-items: normal;,效果为顶部对齐。

    1. 设置 align-items : center
    .flex {
    	display: flex;
    	align-items: center;
    }
    

    效果如下所示:
    单行不设置高度:align-items: center;
    结论:可以看到容器的高度为最高子项的高度,在一行的所有子项全都在交叉轴上居中对齐,即子项的高度中线与flex交叉轴中线重合。

    1. 设置 align-content: center
    .flex {
    	display: flex; 
    	align-content: center;
    }
    

    效果如下所示:
    单行不设置高度:align-content: center;
    结论:可以看到与初始状态并没有区别,即在flex容器不设置高度并且子项只有一行时,align-content属性是不起作用的。

    2.1.2 flex容器设置高度

    初始状态:

    .flex {
    	height: 500px; /* 给flex容器添加一个高度 */
    	display: flex;
    }
    

    效果如下所示:
    单行设置高度
    结论: 与flex容器不设置高度差不多,只是外层容器的高度增加而已。

    1. 设置 align-items : center
    .flex {
    	height: 500px;
    	display: flex;
    	align-items: center;
    }
    

    效果如下所示:
    单行设置高度:align-items: center;
    结论:可以看到在一行的所有子项全都在交叉轴上居中对齐,与flex容器高度不设置时的效果一样(只不过此时高度最大的子项也居中对齐了)。

    1. 设置 align-content: center
    .flex {
    	display: flex;
    	align-content: center;
    }
    

    效果如下所示:
    单行设置高度:align-content: center;
    结论:可以看到,此时align-content: center;并没有起作用,效果与初始状态一样。

    2.2 子项为多行的情况

    初始状态:

    <div className='flex'>
         <div className='i1'>1</div>
         <div className='i2'>2</div>
         <div className='i3'>3</div>
         <div className='i4'>4</div>
         <div className='i5'>5</div>
         <div className='i6'>6</div>
    </div>
    

    对应的CSS:

    .flex {
    	width: 500px;
    	margin: 10px;
    	border: 2px solid #9a9a9a;
    	text-align: center;
    	display: flex;
    	flex-wrap: wrap; /* 使flex容器一行放不下子项换行*/
    }
    .i5 {
    	background-color: #c8b1ff;
    	height: 40px;
    }
    .i6 {
    	background-color: #ffb1e5;
    	height: 80px;
    }
    

    效果如下所示:
    多行不设置高度的初始状态
    结论:同单行一样,这里也有浏览器默认的属性:align-items: normal;align-content: normal;,效果为顶部对齐。

    2.2.1 flex容器不设置高度

    初始状态:

    .flex {
    	display: flex;
    	flex-wrap: wrap; 
    }
    

    效果如下所示:
    多行不设置高度的初始状态
    结论:默认顶部对齐,每一行的高度为该行子项中高度最大的那个值。

    1. 设置 align-items : center
    .flex {
    	display: flex;
    	flex-wrap: wrap; 
    	align-items: center;
    }
    

    效果如下所示:
    多行不设置高度:align-items : center;
    结论:可以看到各行的子项都在各自行上居中对齐(各行的高度由高度最高的子项决定,flex容器的高度为所有行的高度最高的子项高度之和)。

    1. 设置 align-content: center
    .flex {
    	display: flex;
    	flex-wrap: wrap; 
    	align-content: center;
    }
    

    效果如下所示:
    多行不设置高度:align-content: center;
    结论:与初始状态一样,align-content: center并没有起作用,因为此时是以所有子项作为一个整体,而flex容器并没有指定高度(flex容器的高度即为子项整体的最大高度),所以flex容器在交叉轴上没有多余的空间,那么子项整体自然而然也就没有在交叉轴上对齐的说法了。

    2.2.2 flex容器设置高度

    初始状态:

    .flex {
    	height: 500px;
    	display: flex;
    	flex-wrap: wrap; 
    }
    

    效果如下所示:
    多行设置高度初始状态
    结论:由浏览器的默认值确定。

    1. 设置 align-items : center
    .flex {
    	height: 500px;
    	display: flex;
    	flex-wrap: wrap; 
    	align-items: center;
    }
    

    效果如下所示:
    多行设置高度:align-content: center;
    结论:这里我们可以看出,子项分为2行,flex容器将交叉轴上的多余空间按行数平均分给每行,然后每行各自按自己所在的行居中对齐(此时的单行效果跟2.1.2中的例子1效果一样)

    1. 设置 align-content: center
    .flex {
    	height: 500px;
    	display: flex;
    	flex-wrap: wrap; 
    	align-content: center;
    }
    

    效果如下所示:
    多行设置高度:align-content: center;
    结论:我们可以看到,在flex容器指定高度并且子项为多行时,align-content: center是将子项作为一个整体,然后这个整体在flex容器的交叉轴上居中对齐的。

    2.3 补充

    以上为什么要区分flex容器是否有固定高度是因为有一种特殊的情况,即:当子项为单行,flex容器具有固定的高度并且设置了flex-wrap: wrap;时,align-content: center;对单行的子项也有作用。

    <div className='flex'>
         <div className='i1'>1</div>
         <div className='i2'>2</div>
         <div className='i3'>3</div>
         <div className='i4'>4</div>
    </div>
    
    .flex {
    	height: 500px;
    	display: flex;
    	flex-wrap: wrap; 
    	align-content: center;
    }
    

    效果如下所示:
    单行设置高度,flex-wrap: wrap; align-content: center;
    结论:可以看到此时,align-content: center;将单行的子项作为一个整体在交叉轴居中了。

    3. 总结

    如下表:

    条件 属性(是否有效果)
    子项 flex容器 align-items align-content
    单行 不指定高度
    固定高度 否(但是有设置flex-wrap:wrap;时,有效果)
    多行 不指定高度
    固定高度

    结论:从上表可知,对于align-itemsalign-content的区别,我们只需要记住以下两点,

    1. align-items属性是针对单独的每一个flex子项起作用,它的基本单位是每一个子项,在所有情况下都有效果(当然要看具体的属性值)。
    2. align-content属性是将flex子项作为一个整体起作用,它的基本单位是子项构成的行,只在两种情况下有效果:①子项多行且flex容器高度固定 ②子项单行,flex容器高度固定且设置了flex-wrap:wrap;

    这里有个flex布局的小教程,感兴趣的同学可以玩玩:http://flexboxfroggy.com/

    注:这里的高度固定的意思实际上是让flex容器在交叉轴上有多余的空间。


    若对你有帮助,可以支持一下作者创作更多好文章哦~
    赞赏码

    展开全文
  • Python items方法

    千次阅读 2019-05-13 20:43:53
    用法: dict.items() 用法实例: dict = {'Google': 'www.google.com', 'Baidu': 'www.baidu.com', 'taobao': 'www.taobao.com'} # 将字典类型转换为可遍历的元组 print("字典值: %s" %dict.items()) # 遍历字典...
    • 作用: 将字典类型转换为可遍历的元组
    • 用法: dict.items()

    用法实例:

    dict = {'Google': 'www.google.com', 'Baidu': 'www.baidu.com', 'taobao': 'www.taobao.com'}
    
    # 将字典类型转换为可遍历的元组
    print("字典值: %s" %dict.items())
    
    # 遍历字典列表
    for key,values in dict.items():
        print(key,values)
    

    运行结果:
    1
    参考: 菜鸟教程 www.runoob.com

    展开全文
  • python之items

    千次阅读 2019-07-04 07:39:59
    字典items()方法和iteritems()方法,是python字典的内建函数,分别会返回Python列表和迭代器,下面一起来看下字典items()和iteritems()的具体操作方法。 作用 python字典的items方法作用:是可以将字典中的所有项,...

    字典items()方法和iteritems()方法,是python字典的内建函数,分别会返回Python列表和迭代器,下面一起来看下字典items()和iteritems()的具体操作方法。
    作用
    python字典的items方法作用:是可以将字典中的所有项,以列表方式返回。如果对字典项的概念不理解,可以查看Python映射类型字典基础知识一文。因为字典是无序的,所以用items方法返回字典的所有项,也是没有顺序的。
    python字典的iteritems方法作用:与items方法相比作用大致相同,只是它的返回值不是列表,而是一个迭代器。
    调用格式
    字典items()与iteritems()都是函数,调用标准格式和其它函数格式是一样的:变量.方法()
    操作方法
    字典items()操作方法:

    >>> x = {'title':'python web site','url':'www.iplaypy.com'}
    >>> x.items()
    [('url', 'www.iplaypy.com'), ('title', 'python web site')]
    • 1
    • 2
    • 3

    从结果中可以看到,items()方法是将字典中的每个项分别做为元组,添加到一个列表中,形成了一个新的列表容器。如果有需要也可以将返回的结果赋值给新变量,这个新的变量就会是一个列表数据类型。

    >>>a=x.items()
    >>> a
    [('url', 'www.iplaypy.com'), ('title', 'python web site')]
    >>>type(a)
    <type 'list'>
    • 1
    • 2
    • 3
    • 4
    • 5

    dict iteritems()操作方法:

     >>> f = x.iteritems()
     >>> f
    <dictionary-itemiterator object at 0xb74d5e3c>
     >>> type(f)
    <type 'dictionary-itemiterator'>    #字典项的迭代器
     >>> list(f)
    [('url', 'www.iplaypy.com'), ('title', 'python web site')]
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    字典.iteritems()方法在需要迭代结果的时候使用最适合,而且它的工作效率非常的高

    !!!!Python 3.x 里面,iteritems() 和 viewitems() 这两个方法都已经废除了,而 items() 得到的结果是和 2.x 里面 viewitems() 一致的。在3.x 里 用 items()替换iteritems() ,可以用于 for 来循环遍历

    展开全文
  • ItemsPanel 属性

    千次阅读 2018-07-16 14:04:32
    ListBox 的ItemsPanel 属性可以指定定义显示各子项的面板的模板。你可以通过定义自己的模板重写ListBox 常见的垂直堆叠式布局。如果你设置了ItemsPanel 模板为WrapPanel,ListBox 将会有WrapPanel的特性。在...
    展开全文
  • align-items容器属性

    千次阅读 2019-05-02 15:17:24
    align-items容器属性 align-items属性定义项目在交叉轴上如何对齐。 .container { align-items: stretch | flex-start | flex-end | center | baseline; } 这定义了如何沿当前行的横轴布置弹性项目的默认行为。...
  • Python items()方法

    千次阅读 多人点赞 2020-08-10 14:31:10
    items() 方法的遍历:items() 方法把字典中每对 key 和 value 组成一个元组,并把这些元组放在列表中返回。 d = {'one': 1, 'two': 2, 'three': 3} >>> d.items() dict_items([('one', 1), ('two', 2), ...
  • 解决align-items失效,无法居中问题

    千次阅读 2020-08-29 17:17:39
    在做flex布局的时候,有时候你可能会遇到align-items失效的问题,那么下面来说一下 css #main{ display: flex; justify-content: center; align-items: center; } #content{ width: ...
  • python函数—— .items()

    万次阅读 多人点赞 2019-07-30 15:17:11
    话不多说,直接上例子: ...a.items() dict_items([(‘first’, ‘hello’), (‘second’, ‘world’)]) type(a) dict type(a.items()) dict_items for a,b in a.items(): print (a)...
  • Python3 字典 items() 方法

    千次阅读 2019-03-26 18:44:42
    Python3 字典 items() 方法 描述 Python 字典 items() 方法以列表返回可遍历的(键, 值) 元组数组。 [ (键,值) , (键,值) , (键,值) ] 语法 items()方法语法: dict.items() 返回值 返回可遍历的(键, 值) 元组数组...
  • align-items属性

    千次阅读 2019-06-13 22:04:44
    align-items stretch 默认值,项目被拉伸以适应容器 让子元素的高度拉伸适用父容器 子元素不给高度的前提下 center 项目位于容器的中心 垂直居中 flex-start 项目位于容器的开头 垂直对齐开始位置 flex-end .....
  • flex布局中align-items 和align-content的区别

    万次阅读 多人点赞 2016-05-29 17:24:24
    参考资料:http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content看了很多翻译的技术文档,这一块都讲得模糊不清,看到stackoverflow上...align-items The ali
  • Python爬虫5.4 — scrapy框架items模块的使用综述items 介绍声明定义使用items其他博文链接 综述 本系列文档用于对Python爬虫技术的学习进行简单的教程讲解,巩固自己技术知识的同时,万一一不小心又正好对你有用那...
  • 文章目录内容介绍使用Items声明字段字段数据Spider中的使用 内容介绍 数据抓取的主要目标是从非结构化源(通常是网页)中提取结构化数据。 本章节介绍源码中的案例,个人感觉处理数据的操作比较繁琐,将数据处理的流程...
  • 之前写如下代码老是报错,显示AttributeError: 'dict_items' object has no attribute 'sort',后来看了下type,字典items方法的返回值网上查的很多资料都直接说的是列表,但事实上其type是’dict_items’,与‘list...
  • python中items()函数

    千次阅读 2020-12-08 16:25:55
    items() 函数以列表返回可遍历的(键, 值) 元组。 将字典中的键值对以元组存储,并将众多元组存在列表中。 如: favorite_places = {'XiaoMing': 'TJL','XiaoQiang':'Amercia','Dongsheng':'Japan'} print("数值:%...
  • def func(*items): sum = 0; for item in items: sum = sum + item return sum list1 = [1,2,3] list2 = [1,2,3,4,5] data1 = func(*list1) data2 = func(*list2) print(data1) print(data2)
  • 某个程序里有如下代码: # input: [[0, 0], [3, 1], [3, 2], [2, 3], [1,...numbered_sequence.sort(key=lambda items: items[0], reverse=True) # output: [[3, 1], [3, 2], [2, 3], [1, 4], [1, 5], [0, 0]] ...
  • 网格布局中 justify-items 和 align-litems

    千次阅读 2019-11-05 16:42:45
    justify-items 和 align-litems 是从整体上来调整 网格项(grid items)中的内容 在 **网格区域(grid area)**中的位置的。 也可以单独调整 某个网格项(grid items)中的内容,在这个网格项上使用 justify-self 和 ...
  • items=list(counts.items())(ing...........

    千次阅读 2020-11-04 22:24:41
    Python 字典(Dictionary) items()方法 Python 字典(Dictionary) items() 函数 以列表返回可遍历的**(键, 值)** 元组数组。 s = "双儿 洪七公 赵敏 赵敏 逍遥子 鳌拜 殷天正 金轮法王 乔峰" ls=s.split() counts={}...
  • Python 字典 items()方法的简单解析与用法

    万次阅读 多人点赞 2019-01-15 21:25:39
    Python 字典 items() 函数作用:以列表返回可遍历的(键, 值) 元组数组。 items()方法语法: dict.items() 实例: dict = {'老大':'15岁', '老二':'14岁', '老三':'2岁', '老四':'在墙上' } print(dict....
  • Python3:字典中的items()函数

    万次阅读 多人点赞 2017-09-01 10:52:55
    Python3:字典中的items()函数 转载请注明作者和出处:http://blog.csdn.net/u011475210 操作系统:WINDOWS 10 软件版本:python-3.6.2-amd64 编  者:WordZzzz
  • python dict的items和iteritems函数

    千次阅读 2018-07-24 09:58:09
    items(...) D.items() -&amp;gt; list of D's (key, value) pairs, as 2-tuples iteritems(...) D.iteritems() -&amp;gt; an iterator over the (key, value) items of D items()返回的是一个完整的二元...
  • Scrapy ImportError: No module named items

    千次阅读 2017-03-25 23:22:34
    1.问题描述在执行scrapy crawl命令爬取数据的时候,代码报了以下错误:ImportError: No module named items但显然我们代码里面是有items这个类的。那问题出现在哪里呢? 求助万能的stack overflow,发现正好有谈到...
  • justify-content与align-items解析

    千次阅读 2019-08-25 17:54:25
    justify-content是flex布局中的一个属性,用来调整container中的items布局 flex-start (default): 每个item从起点开始依次排布 flex-end: 每个item从尾部开始依次向起点排布 center: items沿中心排布 space-...
  • python dict.items()方法

    千次阅读 2018-06-21 21:27:41
    items()函数以列表返回可遍历的键、值用法:dict.items()dict={"software":16000,"electric":5000}for key,value in dict.items(): print(key,value)当字典名称非dict时class={"chinese&...
  • python字典中的items和iteritems

    千次阅读 2018-08-31 10:14:00
    python字典的items方法作用:是可以将字典中的所有项,以列表方式返回。如果对字典项的概念不理解,可以查看Python映射类型字典基础知识一文。因为字典是无序的,所以用items方法返回字典的所有项,也是没有顺序的。...
  • scrapy 导入items模块的经验

    千次阅读 2020-04-04 21:44:51
    from items import * 可以顺利导入。 但是当运行 scrapy crawl xxx 时会报错。原因是运行scrapy的路径在上一级。 所以 2.如果要运行scrapy命令,则采用如下导入方式: from ..items import * ...
  • zabbix的items与trigger

    千次阅读 2018-08-08 17:04:21
    Items就是监控项,可以配置获取监控数据的方式、取值的数据类型、获取数值的间隔、历史数据保存时间、趋势数据的保存时间、监控key的分组等。 监控项保存在zabbix数据库中。 mysql&gt;select * from zabbix....
  • python字典的items()方法

    千次阅读 2019-10-23 19:20:28
    python新手学字典的时候只知道字典的增删查改,殊不知还有一个items()方法呢~~~~来看看他是怎么回事吧! 首先对他的描述是:python字典items()函数以列表返回可遍历的(键值)元组数组。 其次语法:dict.items() ...
  • 成功解决AttributeError: 'map' object has no attribute 'items' 目录 解决问题 解决思路 解决方法 解决问题 AttributeError: 'map' object has no attribute 'items' 解决思路 属性错误:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 725,280
精华内容 290,112
关键字:

items