家政保洁服务网站模板,南宁网站外包,镇海网站建设,福建建筑人才网档案关联前言
给设置了display#xff1a;flex的子组件设置了flex#xff1a;1#xff1b;就能让他填满整个容器#xff0c;如果有多个就平均
flex#xff1a;1#xff1b;是另外三个样式属性的简写#xff0c;等同
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;我们就针…
前言
给设置了displayflex的子组件设置了flex1就能让他填满整个容器如果有多个就平均
flex1是另外三个样式属性的简写等同
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;我们就针对上面3个属性结合代码来进行讲解
基本demo代码如下
css .flex{display: flex;width: 300px;height: 300px;border:1px solid red}.flex-item{border:1px solid blue;/**我们后面的css代码都放在这里**/}
html
bodydiv classflexdiv classflex-item/div/div
/body
效果 问题交叉轴方向为什么子元素高度填满
为什么flex-item没有设置高度但是他就等同容器交叉轴方向的高度呢
答案 父容器align-items默认值是stretch
这是因为display:flex的容器默认设置了 align-items:stretch;设置了所有一级子元素在交叉轴方向的高度如果给容器设置成align-items: flex-start;就能看到没设置高度的子元素成了一个点效果如下 问题为什么主轴方向元素宽度没有填满父容器
答案
因为子原始默认flex-grow为0也就是即使有足够的空间也不自动填充
修改
.flex-item{border:1px solid blue;flex-grow: 1;/*新增*/
}
效果子元素主轴交叉轴都填满了父容器 第二个例子子元素分割主轴宽度
添加一个新的子元素样式为
.item2{background-color: pink;}
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.flex{display: flex;width: 300px;height: 300px;border:1px solid red}.flex-item{border:1px solid blue;flex-grow: 1;}.item2{background-color: pink;}/style
/head
bodydiv classflexdiv classflex-item1/divdiv classflex-item item2 2/div/div
/body
/html 预览效果 问题为什么两个子元素宽度平均了父容器的宽度
答案
因为子元素设置了flex-grow:1;会根据子元素flex-grow的值来平均分配宽度如果第二个设置了flex-grow2那第二个子元素会占据1/3的宽度
第三个例子子元素宽度相加超出了父容器宽度
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.flex{display: flex;width: 300px;height: 300px;border:1px solid red}.flex-item{border:1px solid blue;width:120px;}.item2{background-color: pink;width:200px;}/style
/head
bodydiv classflexdiv classflex-item1/divdiv classflex-item item2 2/div/div
/body
/html
效果 问题为什么子元素渲染后的宽度变小了
因为flex容器的一级子元素默认允许缩放也就是flex-shrink:1我们把css代码样式改为
.flex-item{border:1px solid blue;width:120px;flex-shrink: 0;/*新增*/
}
这时候那容器就超出父元素了
第四个例子flex-basis
样式修改 .flex-item{border:1px solid blue;box-sizing: border-box;}.item2{background-color: pink;flex-basis:200px; /*新增代码*/width:100px;/*新增代码*/}
效果 flex-basis设置了具体单位只后width属性无效
那设置auto值呢
如果设置了width就读取width否则子元素等于子元素自身的高度
其次子元素的宽度还会收到flex-grow和flex-shrink的影响
width属性的优先级别低于flex-grow和flex-shrink 第五个例子容器呗子元素撑大
子元素嵌套displayflex的子元素容器子元素容器背它的子元素撑大导致文本超出无法显示省略号
代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.flex {display: flex;width: 300px;height: 300px;border: 1px solid red}.flex-item {border: 1px solid blue;box-sizing: border-box;width: 100px;}.item2 {background-color: pink;flex-grow: 1;display: flex;}.innerbox {display: flex;flex: 1;outline: 2px solid brown;/* width: 100%; */}.innerbox .inner-item {/* width: 300px; */background-color: green;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;}/style
/headbodydiv classflexdiv classflex-item1/divdiv classflex-item item2div classinnerboxdiv classinner-item12121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212/div/div/div/div
/body/html
效果 解决 给子元素容器添加width:100%或者overflewhidden;
