![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
flex布局
Fade Away
这个作者很懒,什么都没留下…
展开
-
flex上中下三栏布局【遗留问题】
overflow-x:hidden overflow-y:scroll flex-grow:1 flex-basis:0/0%overflow-x:hidden overflow-y:scroll flex-basis:0/0%overflow-x:hidden overflow-y:scroll原创 2019-04-01 09:22:12 · 1639 阅读 · 0 评论 -
flex初识【三】【属性总结】
先了解剩余空间flex有剩余空间flex-grow单个item设置1 占满多个设置数字 按比例分配flex-basis 与widthflex-basis=0 由内容撑开flex:basis 父元素的百分比值如果一个auto 另一个生效flex-basis优先级高于widthflex-basis和width为auto值,那最后的空间就是根据内容多少来定的,内容多占据的水...原创 2019-03-15 11:15:36 · 208 阅读 · 0 评论 -
flex布局【五】---flex1解析
首先是不对items设置样式他们的默认样式是什么样的flex-grow 默认为0 不占据剩余空间flex-shrink 默认为1 ,在flex-nowarp下,和其它元素等比压缩flex-basis 默认忘了估计是0吧 由内容撑开flex1flex-grow: 1;自动撑满flex-shrink: 1;nowrap下和其它元素等比缩小flex-...原创 2019-03-15 10:22:16 · 302 阅读 · 0 评论 -
flex实现上下固定,中间滚动的效果【假的fixed-真的优化】【四】
<div class="box f"> <div class="left"></div> <d原创 2019-03-14 18:47:41 · 3065 阅读 · 0 评论 -
flex初识【二】[items上的属性分析]
上一篇分析了一下作为容器的flex的6个属性,最后一个aligns-contentr只有父元素高度为固定值才能铺开,否则无效这一篇分析作为flex的子元素,也就是items新增的6个属性 order flex-grow flex-shrink flex-basis flex align-self...转载 2019-03-14 11:01:45 · 179 阅读 · 0 评论 -
flex初识【二】垂直方向的对齐【多行-align-contet】
这个属性要生效标有display:flex的元素有固定高度才可以,若是由内容撑开,则不生效。原创 2019-03-13 20:57:24 · 2536 阅读 · 0 评论 -
flex初识【一】【基本属性】
6个属性flex-direction属性:决定主轴的方向(即项目的排列方向);flex-wrap属性:规定如果一条轴线排不下,如何换行;flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row/nowrap;justify-content属性:定义了项目在主轴上的对齐方式;align-items属性:定义项目在交叉轴上如何对齐;al...原创 2019-03-13 19:57:58 · 292 阅读 · 0 评论 -
flex-basis
所有flex-grow的子元素加上flex-basis: 0%;就是完全等比分布了,这个属性值会让父级主轴在计算剩余空间时忽略子元素的本身宽度,从而实现等比分配。https://segmentfault.com/a/1190000006559564?utm_source=tag-newest...原创 2019-06-05 23:10:41 · 230 阅读 · 0 评论 -
flex-grow 1的问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box { width: 500px; display: flex; background-color: #FF00...原创 2019-06-05 09:16:49 · 556 阅读 · 0 评论