displayflex属性 flex布局的优缺点
今天给各位分享displayflex属性的知识，其中也会对 flex布局的优缺点进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
cssflex属性怎么用
flex属性是CSS的一个简写属性，用于设置或检索弹性盒模型对象的子元素如何分配空间。如果元素不是弹性盒模型对象的子元素，则 flex属性不起作用。
css flex属性怎么用？
flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
说明：flex属性是 flex-grow、flex-shrink和 flex-basis属性的简写属性。
CSS语法
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;属性值：
●flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
●flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
●flex-basis：项目的长度。合法值："auto"、"inherit"或一个后跟"%"、"px"、"em"或任何其他长度单位的数字。
●auto：元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为"flex: 1 1 auto".
●none：元素会根据自身宽高来设置尺寸。它是完全非弹性的，既不会缩短，也不会伸长来适应flex容器。相当于将属性设置为"flex: 0 0 auto"。
●initial设置该属性为它的默认值，即为"flex: 0 1 auto"。
●inherit从父元素继承该属性。
注意：如果元素不是弹性盒模型对象的子元素，则 flex属性不起作用。
css flex属性示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
<p><b>注意:</b> Internet Explorer 9及更早版本不支持 flex属性。</p>
<p><b>注意:</b> Internet Explorer 10通过-ms-flex属性来支持。 IE11及更新版本完全支持 flex属性(不需要-ms-前缀)。</p>
<p><b>注意:</b> Safari 6.1(及更新浏览器)通过-webkit-flex属性支持。</p>
</body>
</html>效果图：
前端应知应会:flex布局详解
前端应知应会：flex布局详解
flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。
flex布局全称flexible box布局模型，是一种比较高效的css3布局方案
通过设置元素的display属性，改成flex属性
来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。
首先看下容器的属性：
1、flex-direction
决定主轴的方向，
默认值是row即横向从左往右的顺序进行排列。
其他选项值还有row-reverse、column、column-reverse
2、flex-wrap
它决定了如果轴线排列不下去的话，如何进行换行
默认是不进行换行，继续沿着主轴方向放置。
其它选项还有：wrap（换行）、wrap-reverse（换行、但是位置跟wrap相反）
3、flex-flow
它是flex-firection和flex-wrap的简写
4、justify-content
该属性定义了item在主轴上的对齐方式
默认值是：flex-start即顺着主轴方向排列对齐
其他还有flex-end：逆着主轴方向并从最远处往主轴起点排列
center：居中
space-between：两端对齐，项目之间间隔相等
space-around：每个项目两侧留白距离相等
5、align-items
该属性定义了项目在交叉轴上如何对齐
毕竟，每个item的高度不一定完全一样。
它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度
其他还有flex-start、flex-end、center、baseline
6、align-content
它跟align-items的区别就是，该属性定义的是多跟轴线的对齐方式
该参数有六个可选项：
flex-start、flex-end、center、space-between、space-around、stretch
这里面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。
针对item，也有一些属性可以设置
1、order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列
2、flex-grow，决定了item的放大比例，默认为0不进行放大。
3、flex-shrink，定义了item的缩小比例，默认为1，如果空间不够的话所有轴线上的item将进行同比缩小，如果为0则该item不进行缩小
4、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item自身的宽度进行分配
5、align-self。定义item在轴线纵向的排列方式，可以替换掉对应flex容器的align-items属性，为该item设置专门的对齐方式
下面再举个例子
<!DOCTYPE html>
<html lang="en">
Flex语法——弹性布局
传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！
1.主轴方向：左到右（默认）|右到左|上到下|下到上
flex-direction: row| row-reverse| column| column-reverse
2.换行：不换行（默认）|换行|换行并第一行在下方
flex-wrap: nowrap| wrap| wrap-reverse
3.主轴方向和换行简写
flex-flow:<flex-direction>||<flex-wrap>
4.主轴对齐方式：左对齐（默认）|右对齐|居中对齐|两端对齐|平均分布
justify-content: flex-start| flex-end| center| space-between| space-around
5.交叉轴对齐方式：顶部对齐|底部对齐|居中对齐|文本基线对齐|如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）
align-items: flex-start| flex-end| center| baseline| stretch
6.多主轴对齐：顶部对齐|底部对齐|居中对齐|上下对齐并铺满|轴线占满整个交叉轴。（默认）
align-content: flex-start| flex-end| center| space-between| space-around| stretch
1.排序：数值越小，越排前，默认为0
order:<integer>
2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）
flex-grow:<number>;/* default 0*/
3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）
flex-shrink:<number>;/* default 1*/
4.固定大小：默认为0，可以设置px值，也可以设置百分比大小
flex-basis:<length>| auto;/* default auto*/
5.flex-grow, flex-shrink和 flex-basis的简写，默认值为0 1 auto
flex: none| [<'flex-grow'><'flex-shrink'>?||<'flex-basis'> ]
6.单独对齐方式：自动（默认）|顶部对齐|底部对齐|居中对齐|文本基线对齐|上下对齐并铺满
align-self: auto| flex-start| flex-end| center| baseline| stretch
这写的很乱，我看着都乱凑合看吧！！！
关于displayflex属性， flex布局的优缺点的介绍到此结束，希望对大家有所帮助。