Flex布局部分属性困惑解析

Gu_Yan 发布于2019-08-01 17:43 / 1365人阅读

摘要：开始最近研究一个框架，刚好里面也实现了布局的算法，虽然平时也用到做一些简单的布局，但是深入到算法实现的时候，发现自己对某些概念倒是没那么清晰，立马谷歌把几个涉及的属性都好好理清一下，权当一个自我梳理。

开始

最近研究一个框架，刚好里面也实现了flex布局的算法，虽然平时也用到flex做一些简单的布局，但是深入到算法实现的时候，发现自己对flex某些概念倒是没那么清晰，立马谷歌把几个flex涉及的属性都好好理清一下，权当一个自我梳理。

main-axis和cross-axis

main其实跟flex-direction这个属性相当有关系，关系如下图：

根据flex-direction的值不同，main-axis方向相应也不同。
既然有方向这个概念，这个时候justify-content属性（justify-content主要负责调整main-axis上元素的布局），在取值为flex-start和flex-end时就要注意了。
而cross-axis是垂直于main-axis的。

当flex-direction取值为row或者row-reverse时cross-axis方向是由下往上。

当flex-direction取值为column或者column-reverse时cross-axis方向是由左往右。

align-items和align-content

首先align-item和align-content都是应用在cross-axis上的元素。
flex布局默认情况下元素是不会换行的，这个时候就是align-items起作用的时候，但是当有多行的情况时，align-items的表现就有点令人失望了。例如你期待是这样一个网格的布局：

但是实际会是这样的效果：

这个网格怎么看都怪怪的有木有。
这个时候就是align-content属性大显神威的时候了，align-content主要应用在存在多行的场景下，但是只有单行的时候，它就失去作用了。

flex-basis

flex-basis可以说是一个并太起眼的属性但是确有很大的意义。
flex-basis的作用，主要在与flex计算剩余空间时起作用，如果你设置flex-basis为一个明确的大小，在计算剩余空间时会先去减去这一部分，然后根据剩余空间为正或为负去应用flex-grow或flex-shrink进行缩放。
当flex-basis是默认值auto时，flex-basis等同于元素的自身宽度（例如你设置了width就是该设置的值，如果width也为auto，那就等同于元素内容的宽度）。
当flex-basis为0时，就等同于完全依赖于flex-grow的比例和剩余空间的大小去分配。

额外点

计算剩余空间时，padding, margin, border和flex-basis是事先扣除，再根据flex-grow去分配空间的。
justify-content为space-around时，元素和父元素的间隙是元素与元素间的间隙的一半。

超融合服务器专线服务 flex布局学习困惑计算机专业的困惑 flex

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51326.html

容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

chanthuang 2019-08-02 16:16 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

elina 2019-08-29 18:47 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0