display flex？display用法
大家好，今天给各位分享display flex的一些知识，其中也会对display用法进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
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布局
弹性盒子布局
<div style="display: flex;flex-direction:row;justify-content:space-between">
1.flex-direction属性
取值：row(默认)| row-reverse| column| column-reverse
用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。
column与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。
取值：nowrap(默认)| wrap| wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
4.justify-content属性
取值：flex-start(默认)| flex-end| center| space-between| space-around| space-evenly;
用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
** 5.align-items属性**
取值：flex-start| flex-end| center| baseline| stretch(默认)
用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
center使用最多，自然不会陌生，在纵轴中心位置排列：
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：
注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。
6.align-content
取值：flex-start| flex-end| center| space-between| space-around| space-evenly| stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度。
flex-start，center，flex-end与align-items属性表现一致：
space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。
align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。
介绍完容器属性，简单介绍下项目属性。容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。
1.order
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。
2.flex-grow
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。
假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。
假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。
3.flex-shrink
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
上图中第二个项目flex-shrink为0，所以自身不会缩小。
4.flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。
上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。
5.flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
6.align-self
取值：auto(默认)| flex-start| flex-end| center| baseline| stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
设置display: 'flex' 后,子标签为何不能浮动
设置display:'flex'后子标签不能浮动，是因为float与flex布局机制冲突，二者无法共存。具体原因及解决方案如下：
原因分析布局机制冲突float是传统布局方式，通过让元素脱离文档流并沿容器边缘排列实现布局，依赖文档流和清除浮动机制。
flex是现代布局系统，通过弹性容器和弹性项目直接控制子元素的对齐、排列和空间分配，子元素默认不脱离文档流。
当父容器设置为display: flex时，其子元素会忽略float属性，因为flex布局会重新定义子元素的排列规则，覆盖float的效果。
解决方案使用flex布局重新调整对齐方式
水平分布：通过justify-content属性控制子元素在主轴（默认横向）上的对齐方式。justify-content: space-between：子元素均匀分布，首尾元素贴边。
justify-content: space-around：子元素均匀分布，每个元素周围空间相等。
单元素靠右：为需要靠右的子元素设置margin-left: auto，使其自动占据剩余空间。.parent{ display: flex;}.child-right{ margin-left: auto;}
使用position: absolute固定位置
若需精确控制子元素位置，可结合position: relative（父容器）和position: absolute（子元素）。
通过top、right、bottom、left属性调整子元素位置，但需注意父容器需设置position: relative以建立定位上下文。.parent{ position: relative;}.child{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
完全转向flex布局
放弃float，充分利用flex的布局功能，例如：垂直居中：通过align-items: center实现子元素在交叉轴（默认垂直方向）上的居中。
多行布局：使用flex-wrap: wrap允许子元素换行，结合align-content控制多行对齐。
.parent{ display: flex; align-items: center;/*垂直居中*/ justify-content: center;/*水平居中*/}
关键总结float与flex不可共存：flex布局会覆盖float效果，需选择其中一种布局方式。推荐flex布局：其功能更强大，能轻松实现垂直居中、空间分配等需求，且代码更简洁。兼容性考虑：若需支持旧浏览器，可检测flex兼容性后降级使用float，但现代项目通常优先采用flex。
关于display flex的内容到此结束，希望对大家有所帮助。