浅谈 flex: 1 的魅力

💭💭

✨： 浅谈flex: 1的魅力
 
💟：东非不开森的主页
 
💜：努力让自己发光，对的人才能迎光而来💜💜
 
🌸: 如有错误或不足之处，希望可以指正，非常感谢😉
 

当我们想要显示一个页面，一边是图片，一边是文本的时候
我们一般就会考虑使用flex布局

• 父元素用display:flex

如下图

 
文本元素

 

预览效果

 
 
我们发现和自己想要的不一样，其实我当时在想是不是返回的图片不对，但是这种图片是不可能一个一个给它改的，数据是活的，那么就是我们的布局出了问题
一个朋友问我子元素文本有没有加flex: 1
果然我一加就可以了哈哈

 

如下图，文本部分

 
想要的效果
 

 

那为什么会差别那么大呢？

• flex父容器的一个子元素加个flex：1才能分配好宽度
• 给文字盒子加flex：1，图片才能显示真实的宽度

1. flex是应用在 flex items 上的 CSS 属性
2. flex 是 flex-grow || flex-shrink || flex-basis 的简写
3. flex:1相当于设置了flex:1 1 auto（元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度，如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。）

 
⭐⭐⭐⭐⭐
结论：
flex：1经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

 
PS：弹性布局是很重要的，当然属性也很多，忘记了就去查，有时间我会做一个总结的！💜💜