标签 flex 下的文章

木灵鱼儿 2年前 CSS

flex布局知识补充

子元素自身的order属性子元素的order的作用详解：默认情况下order的值都为0，如果这个值越小，那么就越靠近起始点，值越大，位置就越后，order其实用于移动元素的位置，而位置的方向则取决于父元素设置的：flex-direction子元素自身的align-self属性从正常角度，align-self是控制子元素y轴的对齐方式，也称侧轴对齐，这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果，最好配合：flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度：当主轴是...

2470 0 0

css flex

关于element的dialog垂直居中的完美解决方案

木灵鱼儿 3年前 vue 项目实战

关于element的dialog垂直居中的完美解决方案

element的dialog弹窗，默认不是垂直居中的，只是水平居中，但是他有一个很好的地方，就是当窗口的高度小于dialog的高度时，他会有滚动条，并且可以完整的显示dialog，算是一个非常不错的兼容方式。但是当我们对dialog进行css调整为垂直居中时，往往会使用下面两种样式：绝对定位：.el-dialog__wrapper { position: relative; .el-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -...

15w 23 235

flex element dialog

flex-grow 1; 不能等分的问题

木灵鱼儿 3年前 CSS

flex-grow 1; 不能等分的问题

当我们给父元素设置flex布局的时候，子元素为了能够等分，常常flex-grow: 1;，但是你会发现，当里面有内容的时候，宽度就发生了变化，变得不是等分了。所以我们可以理解：flex-grow: 1其实他不是真正意义上的等分宽度，而是等分剩余宽度，而剩余宽度是总宽度减去内容宽度，再进行等分。而且这个等分甚至还是根据内容多少来等分，有的内容多，他等分还多一些。所以这就很尴尬。为此，如果想要真正的等分，就需要设置相同的width宽度。如：.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的，如果你设置其他宽度也行，具体看自己...

3970 0 0

弹性布局 css flex

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

木灵鱼儿 4年前 CSS

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

当我们给元素做了flex后，flex内的子元素宽度自适应，但是当我们给子元素设置文本溢出的时候，发现时候无效的，原因是因为他们的宽度没有限制，也就是说原始的宽度无限制，那么这个原始宽度又怎么说呢？他有一个优先级：优先级：flex-basis > width > 内容宽度。我们可以通过设置max-width或者min-width来限制他的宽度，但是并不是很合适，因为这两个只是一个区间，而我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。我们给这个flex子元素设置width:0;即可，设置一个极小的宽度。

5069 3 0

flex 文本溢出

标签：flex

flex布局知识补充

关于element的dialog垂直居中的完美解决方案

flex-grow 1; 不能等分的问题

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

标签：flex

flex布局知识补充

关于element的dialog垂直居中的完美解决方案

flex-grow 1; 不能等分的问题

flex自适应宽度由后text-overflow:ellipsis;失效 文本溢出失效

最近评论

博客文章RSS订阅

博客评论RSS订阅

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效