Flex入门指南

时间：2023-03-31 10:55:29 CSS

ElasticLayoutFlex是几年前的CSS属性，说它解放了一部分生产力也不为过。至少解放了很多CSS布局相关的面试题:)之前网上流行的各种XX布局，比如postion:absolute+margin,float+padding，都可以用flex代替。两年前用的时候，还担心兼容性问题。部分手机使用自动前缀后仍然存在不兼容问题。幸运的是，现在已经是2018年了，再也不用为那些旧设备而烦恼了。希望本文能帮助大家加深对flex的理解。准备工作首先，flex被称为弹性盒模型，也叫弹性布局。总之，不管是盒子还是布局，我们总需要一个容器：

，如果只是一个容器，就没有任何意义。所以我们还需要一些内容：就是基于上面的DOM结构。基本语法现在我们有了一个可以用来编写flex布局的html结构。接下来是最基本的flex布局的实现：

我们在使用display:flex上容器告诉浏览器这是一个flex布局的开始。然后给所有item添加一个flex:1属性，表示这里所有的子元素都会沿主轴平分所有的区域。这样我们就实现了多列等宽布局。关于flex最重要的是要记住它有两个轴（主轴，交叉轴），并且大多数属性都取决于轴的方向。图片来自MDN，因为flex布局分为container和content两部分，各有各的属性，所以先从container类说起。实现上述要求的容器相关弹性属性依赖于很多默认属性值。比如我们的子元素为什么要水平划分空间而不是垂直划分空间，这里有一个属性的默认值：flex-directionflex-direction用于定义flex布局中主轴的方向。默认值为row，它是水平的，表示从左到右，也就是说我们所有的子元素都会按照从左到右的顺序排列。我们可以通过将值设置为列来改变主轴的方向，将其修改为从上到下。（改变flex-direction的值会影响一些相关属性，下面会提到）flex-direction有四种有效值可供选择：row默认值，从左到右row-reverse从右到左columnfromtopTobottomcolumn-reverse从下到上在React-Native中，默认的轴方向是column，所以flex-direction的作用是定义元素在容器中的排列方向。flex-wrap这个属性用来定义当子元素沿着主轴超出容器的范围后，应该按照什么规则来排列。该属性只有三个简单的值：wrap超出主轴范围后换行显示，换行方向沿横轴方向（默认换行到下一行）。wrap-reverse超出主轴范围后换行显示，但是方向是横轴的反方向（即第一行默认会出现在底部）nowrap即使超过也不会换行容器，但试图压缩内部flex元素的宽度（下面子元素相关的属性会说到）三个值的例子：flex-flowflex-flow是一个简写属性，适用于上述的flex-direction和flex-wrap语法：selector{flex-flow:

;}justify-content这将定义我们的子元素如何沿主轴排列，因为我们直接填充了上面的父元素，效果不是很明显。所以我们修改代码如下：.container{display:flex;宽度：400px；颜色：#fff；边框：1px实心#03a9f4；}.item{/*flex:1;*/宽度：100px；文本对齐：居中；背景：#03a9f4；}项目1项目2项目3将所有子元素改为固定宽度，即如果父元素有剩余空间，则那里为空。justify-content的默认值是normal，也可以认为是start，即按照主轴方向（flex-direction）在开头堆叠。几个常用的值：center必须是首选，可以完美实现沿主轴居中。值：space-between将剩余空间平均分配给子元素，确保沿主轴两侧不留空白。space-around将剩余空间沿主轴均匀分布在所有子元素的两边，也就是说主轴两边都会有空白，但必须是中间空白大小的1/2.space-evenly将剩余空间平均分配给所有元素，主轴两侧的空白将等于中间的区域。六种效果示例：Warning需要注意的一点是justify-content的值是按照flex-direction定义的主轴方向显示的。也就是说，center默认用于水平居中，当flex-direction:column-*时，显示为垂直居中。align-content同样，align-content也是用来控制元素在横轴上的排列顺序的，但是由于会有两个属性（align-items和align-content），所以两者之间肯定有一些区别。因为align-content只能应用于多行情况下的flex布局，旋转后该值会更接近justify-content，也可以使用space-between等属性值。因为取值基本相似，上面justify-content中列出的表格不再赘述，直接套用效果：align-itemsalign-items和上面justify-content类似，也适用于定义子元素的排列。不同的是align-items作用在横轴上（即默认flex-direction:row时从上到下的轴）。视觉上，最常用的地方就是水平居中（我现在偷懒了：只要有单行混合图标、表格、文字，都会选择align-items:center来实现:)）常用值:center常用于垂直（横轴）居中flex-start沿横轴的起始位置flex-end与flex-start方向相反。stretch将元素拉伸到容器横轴的宽度（默认情况下，这里指的是容器的高度，但是如果单纯说这个轴，我觉得宽度更合适）baseline将element根据文本内容的基线以上取值示例：align-content和align-items的异同两者的区别在于它们都设置了元素在横轴上的排列顺序。区别在于以下两点：当align-content只能应用于多行时，align-content会将所有元素作为一个整体来进行相应的处理，而align-items会根据每一行进行处理：place-contentplace-content可以被认为是justify-content和align-content的简写（事实上它是）语法：selector{place-content:

;}P.S.如果想要单行（元素）实现居中，老老实实的用align-items+justify-content吧：）子元素的属性都是和容器相关的。上面已经列出了容器的所有属性，下面的一些是容器中元素设置的属性。flex-growflex-grow用于控制子元素需要沿主轴填充时的比例，取值为正数（浮点数也可以）。选择器{flex-grow:1;flex-grow:1.5;}例子：如果一个容器中有三个元素，容器剩余宽度为100px，需要三个元素填充。如果其中一个元素设置了flex-grow:2，另一个设置为1（默认不设置则不会填满剩余宽度），就会出现这样的情况，第一个元素占50px，而另外两个元素各占25px。警告这里要注意的一件事是flex-grow定义了剩余宽度的利用率。不计算元素本身占用的空间。为了验证以上观点，我们进行一个小实验。给每个元素设置一个padding-left:20px，保证元素本身占据20px的位置，然后设置flex-grow，看看最后一个元素的宽度。.container{显示：flex;宽度：160px；高度：20px；对齐项目：拉伸；}.item{flex-grow：1；padding-left:20px;}.item:first-of-type{flex-grow:2;}我们设置容器的宽度为160px（为了减去padding-left计算方便）。最后的结果是flex-grow:2的元素宽度为70px，flex-grow:1的元素宽度为45px。在减去自身的20px之后，50/25===2//true。flex-shrinkflex-shrink可以认为是与flex-grow相反的设置，其值也是正数。用于设置容器宽度小于所有子元素所占宽度时的缩放比例。比如我们的容器是100px宽，三个元素都是40px，就会出现容器无法完整显示所有子元素的问题。所以默认flex会对子元素进行缩放，每个元素需要缩放多少根据flex-shrink的配置获取（默认为1，所有元素平分）。就像上面的例子，如果我们还有三个元素，第一个设置flex-shrink:2，最后的结果是第一个元素的宽度是30px，另外两个元素的宽度是35px。.container{显示：flex;宽度：100px；高度：20px；align-items:stretch;}.item{宽度：40px;/*伸缩收缩:1;它是默认值*/font-size:0;#03a9f4;}.item:first-of-type{flex-shrink:2;}flex-basis这个属性用来设置元素在f??lex容器中所占的宽度（默认主轴方向），这个属性是主要用于制作flex来计算容器是否有剩余面积。默认值为auto，即继承width的值（direction:column时为height）。一般来说，很少设置这个值。flexflex是上面三个属性的缩写，语法如下：selector{flex:

;}一般来说，如果要写缩写，第三个会设置为auto，即获取元素的宽度。align-self效果就像它的名字一样，为一个元素设置一个类似于align-items的效果。该值与align-items一致。比如我们可以有针对性的实现这个效果：}.flex-end:first-child{align-self:flex-start;}.stretch:first-child{align-self:center;}order最后还有一个order属性，可以在display元素上设置命令。该值是一个任意整数。默认值为1，如果我们想让下面的元素提前显示，可以设置如下属性：.item:last-of-type{order:-1;}P.S.这种顺序变化只是为了展示，并不是真正的改变html的结构，比如你仍然无法通过.item:last-of-type~.item直观的获取到它后面的兄弟元素，当顺序重复时，排列thesize按照前面的顺序总结flex相关的属性怎么样拆分后，不会太多。记住主轴和交叉轴后，它应该会变得更清晰一些。以上所有属性的简单总结：容器相关的属性名flex-direction用于设置主轴的方向，最基本的属性，默认从左到右，一旦改变这个属性，以下所有properties也要相应的改，true可以说flex-wrap设置了元素超出容器后的换行规则，默认是不换行justify-content。Justify-content设置沿主轴的对齐规则。align-content设置沿交叉轴的对齐规则。下）为单位，沿横轴设置排列规则。元素相关的属性名函数。flex-grow当容器比所有元素都大时，剩下的空间按多少比例分配给元素flex-shrink？当容器小于所有元素时，元素是什么比例缩小flex-basis很少用到的属性，在容器中设置width(height)align-self为部分元素单独设置align-items相关效果.flowflex-direction和flex-wrap的简写place-contentjustify-content和align-contentflexflex-grow的简写，flex-shrink和flex-basis的简写，文中的所有示例代码都在这里。参考资料Flexbox的工作原理（本文中的一些gif非常好）理解Flexbox：你需要知道的一切在5分钟内学习CSSFlexbox先立个flag，后面会有各种flex的实际场景应用，毕竟纸上谈兵没意义

上一篇：基于less、sass、stylus三种预处理rem

下一篇：修改输入框占位符默认颜色text-webkit-input-placeholder

Flex入门指南相关文章