精华内容
下载资源
问答
  • 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容器在交叉轴上有多余的空间。


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

    展开全文
  • 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上有人提问后的回答觉得...

    参考资料:http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content

    看了很多翻译的技术文档,这一块都讲得模糊不清,看到stackoverflow上有人提问后的回答觉得十分清晰,特来分享,有不当之处欢迎指正。
    align-items

    The align-items property applies to all flex containers, and sets the
    default alignment of the flex items along the cross axis of each flex
    line.

    align-items属性适用于所有的flex容器,它是用来设置每个flex元素在交叉轴上的默认对齐方式。
    还有一位回答者的回答也很好,如下

    align-items has the same functionality as align-content but the difference is that it works to center every single-line container instead of centering the whole container.

    align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

    如下图
    这里写图片描述

    align-content

    The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.

    align-content属性只适用于多行的flex容器,并且当交叉轴上有多余空间使flex容器内的flex线对齐。
    感觉这样翻译了之后还是略微有些抽象,不过有一个重点就是多行
    下面我们来写一个小的例子。

    <div class="child-1">
    	<div class="child-2">					
    	</div>
    	<div class="child-2">					
    	</div>
    </div>
    

    html结构如上。
    如果child-1的width设置为100px,child-2的width设置为30px,这样child-2会排列在一排上,具体的css如下

    <style type="text/css">
    		*{
    			margin:0px;
    			padding: 0px;
    		}
    		div{
    			border: 1px solid #0f0f0f;
    		}
    		.child-1{
    			margin: 30px auto;
    			display: flex;
    			width: 100px;
    			height: 60px;
    			justify-content: space-around;
    			align-content: center;
    		}
    		.child-2{
    			width: 30px;
    			height: 20px;
    		}
    	</style>
    

    最终的结果如下图
    这里写图片描述

    所以对于只有一行的flex元素,align-content是没有效果的,如果.child-1改用align-items:center;则会达到预期的效果,如下图
    这里写图片描述

    但如果变成多行容器
    使用align-items时效果如下
    这里写图片描述
    使用align-content效果如下
    这里写图片描述

    展开全文
  • text-alignalign的区别

    千次阅读 2019-01-19 18:58:10
    text-alignalign的区别 时间 2016-01-14 标签 text-align align text-alignalign的区别 栏目 HTML 原文 http://blog.csdn.net/zjh_1110120/article/details/50519395   align :规定 div 元素中...

    text-align 和 align的区别

    时间  2016-01-14

    标签 text-align align text-align和align的区别 栏目 HTML

    原文   http://blog.csdn.net/zjh_1110120/article/details/50519395

     

    align :规定 div 元素中的内容的水平对齐方式。 
    text-align:规定“元素中”的文本的水平对齐方式。 
    两个属性使用的地方不一样,但是作用一样! 
    <div align="center"> 
    This is some text! 
    </div> 

    align直接写在是div的属性 

    <div style="text-align:center"> 
    text-align则是Css的属性

     

    来源:http://www.voidcn.com/article/p-gbltktwi-bdo.html

    展开全文
  • align-content、align-items以及align-self都是在进行弹性布局所常用的属性,并且都是对齐弹性盒,那么他们之间到底有什么区别? align-content 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想...

    align-content、align-items以及align-self都是在进行弹性布局时常用的属性,并且都是弹性盒

    元素在该行侧轴(纵轴)上对齐的位置,那么他们之间到底有什么区别?

    align-content与align-items

    align-content对于单行的的盒子不起任何作用,而align-items则不区分单行与多行。基本元素的代码如下:

    item{
       display: flex;
        width: 100px;
        height: 98px;
        border: 1px solid #ccc;
        justify-content: center;/*水平居中对齐, flex-end右对齐*/
    }
    .dian{
        width: 30px;
        height: 30px;
        border-radius: 30px;
        border: 1px solid #000;
    }
    
    <div class="item">
       <span class="dian">
    
        </span>
    </div>
    

    在这里插入图片描述
    所出来的图片如上图所示,此时的球只是位于顶部,并没有在中间的位置,然后在.item中添加属性align-content: center,是不起任何作用的,但是align-items: center确实没问题的
    在这里插入图片描述
    这是因为.item里面就只有.dian一个元素,不能使得它构成一个多行,而align-content是不能控制单行的盒子内位置变换,而align-items可以,但是若是在.item中添加属性flex-wrap: wrap,align-content就可以起作用了,这是因为flex-wrap:wrap这个属性是可以让弹性盒子在必要的时候自行换行(或换列),这使得.item可以自行变为一个多行盒子,让align-content起到作用。

    align-self与align-items

    align-items是一个弹性容器,而align-self则是一个弹性项目,可以简单理解为,align-items是控制容器内的元素布局,而align-self则是控制自身的。同样用上面的小球作为例子,为了能够方便区分,在外层多加一层盒子:
    在这里插入图片描述
    我们尝试在.item中添加属性align-items:center,里面的小球是到盒子的中间(参照上面align-content与align-items的对比图二),但是如果用align-self替换align-items后
    在这里插入图片描述
    小球并没有发生位置上的变化,但是灰色的盒子却到了中间

    展开全文
  • LaTeX中alignalignat之间的区别

    千次阅读 2020-03-22 15:33:43
    第一个区别是使用align不需要额外的参数: \begin{align} 而alignat需要: \begin{alignat}{<number>} 两种环境都创建基于rl对的列对齐,align会根据你写的内容创建足够多的列,而alignat需要你提前指定...
  • align与text-align

    2014-12-01 17:25:47
    【1】除图片外,align和text-align的意思是一样的,都是定义标签内内容的水平对齐方式,分为left、center、right 【2】但是,align和text-align所放的位置是不同的: (1) 在标签内直接设置内容的水平对齐方式,要...
  • align和text-align区别

    千次阅读 2016-10-14 11:01:06
    align :规定 div 元素中的内容的水平对齐方式。 text-align:规定“元素中”的文本的水平对齐方式。 两个属性使用的地方不一样的! div align="center"> This is some text! div> align直接写在是div的属性 ...
  • Linux内核 ALIGN PAGE_ALIGN

    千次阅读 2014-05-13 10:09:08
    #define __ALIGN_MASK(x,mask) (((x)+(mask))&~(mask)) #define ALIGN(x,a) __ALIGN_MASK(x,(typeof(x))(a)-1) 写简单点,宏ALIGN实际上是这样定义的 #define ALIGN(x, a) (x + (a - 1)) & ~(a - 1) 并且在计算...
  • RoIAlign源码解析

    千次阅读 2018-02-01 20:31:31
    RoIAlign源码及示意图 /* * 参数解释 * bottom_data 需要做RoIAlign的feature map * spatial_scale feature map放缩的尺寸 vgg是1/16 * channels height width feature map的通道高和宽不用多说 * pooled_height ...
  • align-item 和 align-content的区别

    千次阅读 2019-03-08 09:19:00
    align-content 和align-items : 1:共同点:它们对齐方向为交叉轴 2:不同点:align-content 应用于为 多行 而 align-items:应用于单行。 转载于:https://www.cnblogs.com/huanhuan55/p/10493899.html...
  • 今天在群里看到有人提到layout_alignRight 这种属性,自己想了半天居然没有了印象 赶紧写一个布局看看这个相对布局的属性 先看下自己常用的属性 android:alignParentBottom android:layout_alignParentLeft ...
  • ROI Align 解析

    千次阅读 2018-03-08 20:45:09
    ROI Align 是何凯明在2017年的论文Mask-RCNN中提出的,该方法很好地解决了ROI Pooling操作中两次量化造成的区域不匹配(mis-alignment)问题。本文将先从实验结果入手,然后分析ROI Pooling产生局限性的具体原因和ROI ...
  • 标签 align 属性

    千次阅读 2017-09-21 17:24:29
    align=align - 对齐位置 首页 > HTML标签 > align=align ■ 属性 align=align> - 对齐位置 ■ 块元素、单元格元素的 align 属性 、、、、、、、、、、、 等标签的 align 属性可以设置元素内数据...
  • 在之前使用弹性布局的时候,align-content与align-items的概念混淆不清,自己特意写了一下来区分. 1.首先要知道:交叉轴就是Y轴,另一个就是主轴 2.多行容器与单行容器: 弹性容器可以划分为多行容器和单行容器,...
  • Flutter Align控件用法

    千次阅读 2019-10-30 10:40:03
    Align用来确定子控件在父布局中的位置,定义如下 const Align({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child, }) alignment属性设置子控件的位置,...
  • 1、align属性趋向于左右对齐,其值包含:left、right、center 2、valign属性趋向于垂直对齐,其值包含:top、bottom、middle、baseline 如 : type="image" src="submit.jpg" alt="Submit" align="right" /> ...
  • Neural Machine Translation by Jointly Learning to Align and Translate TLDR; The authors propose a novel “attention” mechanism that they evaluate on a Machine Translation task, achieving new state of...
  • text-align的用法

    万次阅读 多人点赞 2019-01-05 20:50:16
    text-align的用法 text-align运用在块级元素中,使其中的文本对齐。事实上这句话的意思是运用在块级元素中text-align会使其包含行内元素对齐。 &lt;div class="test"&gt; &lt;p&gt;hhh&...
  • linux ALIGN

    千次阅读 2015-03-25 11:12:19
    #define ALIGN(x,a) (((x)+(a)-1)&~(a-1))  就是以a为上界对齐的意思。举个例子4k页面边界的例子,即a=4096:如果x = 3888;那么以上界对齐,执行结果就是4096。如果x = 4096;结果是4096. 如果x = 4222; 则结果...
  • CSS-vertical-align

    2019-09-02 23:51:32
    vertical-alignvertical-align vertical-align 设置元素的垂直对齐方式 注意 : text-align是设置给需要对齐元素的父元素 vertical-align是设置给需要对齐的那个元素本身 vertical-align只对行内元素有效 img { ...
  • display: flex text-align align-items justify-content 居中测试过程 刚刚接触HTML CSS,想记录一下我自学中遇到的很小白的问题。 此次练习的目的是将下图中2222水平竖直居中在浅灰色方块中。 遇到的问题是使用...
  • Align With View和Align View To Select之妙用

    千次阅读 2017-12-04 22:14:19
    1.Align With View和Align View To Select之妙用 Scene视图相当于View Q:有时候打开一些Unity3DDemo时,如果想让Scene中看到的与MainCamera中(Game视图)一致; 步骤一:选中MainCamera.; 步骤二:选择...
  • vscode markdown align失效

    2019-12-27 12:05:15
    想要在vscode下的markdown文件中插入多行对齐的公式,但是尝试 alignalign* 都不可行。 $$ \begin{align} f(x) & = (m+n)^2 \\ & = m^2+2mn+n^2 \\ \end{align} $$ 显示: \begin{align} f(x) & = ...
  • align-items容器属性

    千次阅读 2019-05-02 15:17:24
    align-items容器属性 align-items属性定义项目在交叉轴上如何对齐。 .container { align-items: stretch | flex-start | flex-end | center | baseline; } 这定义了如何沿当前行的横轴布置弹性项目的默认行为。...
  • 一开始接触align-items还可以理解感觉不难,后来看到align-content就感觉有点混淆了,特开一篇博客记录一下我的学习过程。先来看看两个属性的基本用法和定义,这里摘抄于萤火虫塔莉上的回答。 align-items The ...
  • memory align

    千次阅读 2010-05-03 16:38:00
    默认的new XMMATRIX这种class声明里面带align的实际被无视了。 _mm_malloc 这个可以。
  • 其中align-items属性用于弹性容器,而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性,包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。
  • LINUX对齐Align原理

    2019-02-18 14:16:40
    #define __DATA_ALIGN(end, align) (((unsigned int)end+align-1)&amp;(~(align-1))) #define __MSG_ALIGNED(end) __DATA_ALIGN(end, 0x10) 光看字面意思,可以知道是字节align大小对齐的作用。原理上是怎么一...
  • 汇编中的align 指令

    千次阅读 2019-11-15 11:17:20
    align 地址对齐的伪指令,用来指定符号的对齐方式。.align的作用范围只限于紧跟它的那条指令或者数据,而接下来的指令或者数据的地址由上一条指令的地址和其长度决定。 不同平台的align 指令 有两种对齐方式 第一种...
  • align-content容器属性

    千次阅读 2019-05-02 15:39:23
    align-content容器属性 align-content当横轴上有额外的空间时,属性会在flex容器内对齐flex容器的线,类似于justify-content在主轴内对齐各个项的方式。 .container { align-content: flex-start | flex-end | ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 727,008
精华内容 290,803
关键字:

align