小技巧：

实现如图子元素自动居于右下角

 .container {         display: flex;flex-direction: row;background: pink;}.child {background: black;width: 50px;height: 50px;margin-left: auto;align-self: flex-end;}<div class="container"><div class="child"></div>
</div>

bug:

1. 子元素flex 均为1 时其中一个如果设置了padding 那么会出现padding 元素多分空间问题如图

  <style>.container {width: 300px;height: 50px;display: flex;flex-direction: row;}.child {flex: 1;border:1px solid black;}.child2 {padding: 0 40px;}
</style><div class="container"><div class="child"></div><div class="child child2"></div><div class="child"></div>
</div>

解决方法：给所有均分元素添加 flex-basis: calc(100% / n);
box-sizing: border-box;两个属性

  <style>.container {width: 300px;height: 50px;display: flex;flex-direction: row;}.child {flex: 1;flex-basis: calc(100% / 3); //解决padding问题box-sizing: border-box  ;    //解决padding问题border:1px solid black;}.child2 {padding: 0 40px;}
</style><div class="container"><div class="child"></div><div class="child child2"></div><div class="child"></div>
</div>

如果是想按照1:2:3 分布且每个child 都有padding可以这样

  <style>.container {width: 600px;height: 50px;display: flex;flex-direction: row;}.child {box-sizing: border-box;border: 1px solid black;}.child1 {flex-basis: calc(100% / 6);}.child2 {padding: 0 40px;flex-basis: calc(200% / 6);}.child3 {/*flex: 3;*/padding: 0 40px;flex-basis: calc(300% / 6);}</style><div class="container"><div class="child"></div><div class="child child2"></div><div class="child"></div>
</div>或者样式改为width
<style>.container {width: 600px;height: 50px;display: flex;flex-direction: row;}.child {box-sizing: border-box;border: 1px solid black;}.child1 {padding: 0 40px;width: calc(100% / 6);}.child2 {padding: 0 40px;width: calc(200% / 6);}.child3 {padding: 0 40px;width: calc(300% / 6);}</style>

flex 子元素为auto时出现高度溢出压缩其他元素空间的问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex</title><style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}.container {width: 60px;height: 500px;display: flex;flex-direction: column;}.child1 {height:100px;background: yellow;}.child2 {flex: auto;background: red;overflow: scroll;height: 0;// 添加heigh:0 可解决此问题}.child3 {width: 100%;height:100px;background: blue;}.overChild{height:320px}</style>
</head>
<body>
<div class="container"><div class="child child1"></div><div class="child child2"><div class="overChild"></div></div><div class="child child3"></div>
</div>
</body>
</html>

如果父级元素 flex-direction :row 时设置auto 元素 width :0 即可

css flex 布局小技巧和bug相关推荐

第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用图片鼠标放上去遮罩效果,显示文字当鼠标放上去时 /*最外层div*/ .a{width: 384px;height: 240px;backgrou ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
FLEXBOX FROGGY11-24level(flex布局小游戏)
FLEXBOX FROGGY11-24level(flex布局小游戏) FLEXBOX FROGGY11-24level(flex布局小游戏) level-11 使用 flex-direction 和 ...
[css] flex布局的缺点有哪些？（除兼容性外）
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
【建议收藏】17个XML布局小技巧
前言我们开发时接触最多的就是xml布局了,还记得我们写Android的第一个Hello World吗,就是通过activity_main.xml显示出来的. 虽然xml写的很多,而且也没有什么技术难 ...
html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
flex开发小技巧集锦
关于flex开发网上有非常多的相关信息介绍,因此我们要想学习关于flex开发的知识信息技能是一件非常简单和方便的事情.而针对于flex开发小编要告诉大家的是一些flex开发小技巧.利用这些小技巧能够有 ...

css flex 布局小技巧和bug

小技巧：

实现如图子元素自动居于右下角

bug:

1. 子元素flex 均为1 时其中一个如果设置了padding 那么会出现padding 元素多分空间问题如图

flex 子元素为auto时出现高度溢出压缩其他元素空间的问题

css flex 布局小技巧和bug相关推荐

最新文章

热门文章

css flex 布局小技巧和bug

小技巧：

实现如图 子元素自动居于右下角

bug:

1. 子元素flex 均为1 时 其中一个如果设置了padding 那么会出现padding 元素多分空间问题 如图

flex 子元素为auto时 出现高度溢出压缩其他元素空间的问题

css flex 布局小技巧和bug相关推荐

最新文章

热门文章

实现如图子元素自动居于右下角

1. 子元素flex 均为1 时其中一个如果设置了padding 那么会出现padding 元素多分空间问题如图

flex 子元素为auto时出现高度溢出压缩其他元素空间的问题