猪八戒网站建设公司,南昌有哪些推广平台,宁波网站建设公司推荐易企网,中企动力z云邮关于Flex#xff0c;有12个属性非常重要 这几天在学习Flex布局#xff0c;发现Flex真的好厉害#xff01; Flex是Flexible Box的缩写#xff0c;意为“弹性布局”#xff0c;用来为盒模型提供最大的灵活性。 Flex是它能够简单、完整、响应式的实现各种网页布局#xff0c… 关于Flex有12个属性非常重要 这几天在学习Flex布局发现Flex真的好厉害 Flex是Flexible Box的缩写意为“弹性布局”用来为盒模型提供最大的灵活性。 Flex是它能够简单、完整、响应式的实现各种网页布局眼下已经得到了大多数主流浏览器的支持有关于它的兼容性能够在CanIuse中的查询到 不论什么一个容器都能够指定为Flex布局 .box {display: flex;
}
.box {display: inline-flex; // 行内元素通过这样的方式指定为Flex布局
}
.box {display: -webkit-flex // Webkit内核浏览器使用此方式指定为Flex布局
} 这篇文章是我对Flex的总结。文章中的内容主要借鉴自Flex布局教程 by阮一峰、flex布局 by饥人谷方方老师。 基本概念 flex container採用Flex布局的元素即父元素称为Flex容器简称容器。flex item父元素内包括的子元素称为Flex项目简称项目。Flex是没有方向之分的在Flex容器中默认存在两根轴水平的轴为 主轴main axis垂直的轴为 側轴cross axis。假设改变flex-direction主轴和側轴也将会改变主轴的開始位置与边框的交叉点叫做 main start 。结束位置叫做 main end 。側轴的開始位置叫做 cross start 结束位置叫做 cross end 。项目默认沿主轴方向排列单个项目占领的主轴空间叫做 main size 。側轴空间叫做 cross size 。以上概念能够用下图全部展现 注意设为Flex布局后子元素的float、clear、vertical-align属性将失效。 容器父元素的属性 容器共同拥有六个属性 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction属性 flex-direction属性决定主轴的方向它可能有四个值。 row默认值。主轴为水平方向。起点在左端。row-reverse主轴为水平方向起点在右端。column主轴为垂直方向。起点在上端。column-reverse主轴为垂直方向起点在下端。四种值相应的情况例如以下图所看到的 flex-wrap属性 flex-wrap属性决定项目在一行排不下的情况下是否换行。它可能有三种值。 nowrap默认值。不换行。wrap换行第一行在主轴開始方向。依次往主轴结束方向布置。wrap-reverse换行第一行在主轴结束方向依次往主轴结束方向布置三种值相应的情况例如以下图所看到的 flex-flow属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。 justify-content属性 justify-content属性定义了项目在主轴上的对齐方式它可能有五个值。 flex-start默认值主轴開始方向对齐。flex-end主轴结束方向对齐。center主轴居中对齐。space-between两端对齐项目之间间隔都相等。space-around每一个项目两側的间隔相等所以项目之间间隔是项目与边框间隔的两倍。 假设主轴为从左到右。五种值相应的情况例如以下图所看到的 align-items属性 align-items属性定义了每行项目在側轴方向上的对齐方式它也可能有五个值。 - flex-start側轴開始方向对齐。 - flex-end側轴结束方向对齐。 - center側轴居中对齐。 - baseline项目第一行文字的基线对齐 - stretch默认值假设项目未设置高度或高度设为auto将占满整个容器。 假设側轴为从上到下。五种值相应的情况例如以下图所看到的 align-content属性 align-content属性定义了容器在側轴方向上有额外空间时。怎样每排布一行当容器仅仅有一行时。它不起作用。它可能有六个值。 flex-start側轴開始方向对齐。flex-end側轴结束方向对齐。center側轴中心中对齐。space-between与側轴两端对齐每行轴线间隔平均。space-around每根轴线两側间隔相等。stretch默认值。占满整个整个側轴假设側轴为从上到下。六种值相应的情况例如以下图所看到的 项目子元素的属性 项目共同拥有六个属性 orderflex-growflex-shrinkflex-basisflexalign-selforder属性 order属性定义项目的排列顺序。数值越小排列越靠前默觉得0可能的值为随意整数。 flex-grow属性 flex-grow属性定义项目的放大比例默觉得0即假设存在剩余空间也不放大。 假设全部项目的flex-grow属性都为1则它们将等分剩余空间假设有的话。假设一个项目的flex-grow属性为2其它项目都为1则前者占领的剩余空间将比其它项多一倍。例如以下图所看到的 flex-shrink属性 flex-shrink属性定义了项目的缩小比例默觉得1。即假设空间不足该项目将缩小。 负值对该属性无效,即该属性可能的值为0或正整数。 假设全部项目的flex-shrink属性都为1。当空间不足时都将等比例缩小。假设一个项目的flex-shrink属性为0其它项目都为1。则空间不足时。前者不缩小。例如以下图所看到的 flex-basis属性 flex-basis属性定义了在分配多余空间之前项目占领的主轴空间main-size。浏览器依据整个属性。计算主轴是否有多余空间。它的默认值为auto。即项目的本来大小。 它能够设为跟width或height属性一样的值比方350px。则项目将占领固定空间。 flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值auto (1 1 auto)既能够放大占满空间。也可缩小 和 none (0 0 auto)不可放大也不可缩小。 建议优先使用这个属性。而不是单独写三个分离的属性由于浏览器会推算相关值。 align-self属性 align-self属性同意单个项目有与其它项目不一样的側轴对齐方式可覆盖align-items属性。默认值为auto表示继承父元素的align-items属性。假设没有父元素则等同于stretch。 其值除auto外。其它与align-items全然一致。 总结 仅仅要记住了这12个属性使用Flex布局就肯定没问题啦在我的GitHub上有几个关于Flex布局的小样例想复习的朋友能够去试一试仓库地址在这里。 (完) 转载于:https://www.cnblogs.com/lytwajue/p/7293918.html
