💭💭
✨： 浅谈flex: 1的魅力
💟：东非不开森的主页
💜：努力让自己发光，对的人才能迎光而来💜💜
🌸: 如有错误或不足之处，希望可以指正，非常感谢😉
当我们想要显示一个页面，一边是图片，一边是文本的时候
我们一般就会考虑使用flex布局
- 父元素用
display:flex
如下图
文本元素
预览效果
我们发现和自己想要的不一样，其实我当时在想是不是返回的图片不对，但是这种图片是不可能一个一个给它改的，数据是活的，那么就是我们的布局出了问题
一个朋友问我子元素文本有没有加flex: 1
果然我一加就可以了哈哈
如下图，文本部分
想要的效果
那为什么会差别那么大呢？
- flex父容器的一个子元素加个flex：1才能分配好宽度
- 给文字盒子加flex：1，图片才能显示真实的宽度
- flex是应用在 flex items 上的 CSS 属性
- flex 是 flex-grow || flex-shrink || flex-basis 的简写
- flex:1相当于设置了flex:1 1 auto（元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度，如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。）
⭐⭐⭐⭐⭐
结论：
flex：1经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
PS：弹性布局是很重要的，当然属性也很多，忘记了就去查，有时间我会做一个总结的！💜💜