display：flex，css中flex是什么意思
老铁们，大家好，相信还有很多朋友对于display:flex和css中flex是什么意思的相关问题不太懂，没关系，今天就由我来为大家分享分享display:flex以及css中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>效果图：
设置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。
前端应知应会: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">
关于display:flex到此分享完毕，希望能帮助到您。