Flex很难?一文就足够了
Flexible Box 是什么??布局的传统解决方案,基于盒状模型,依赖? ??由于浏览器的限制,在写代码之前推荐查询一下兼容模式,了解下目前flex的支持程度,我们可以通过CanIuse这个网站来进行查询,如下图,可以看到,除了对于IE支持一般之外,其他浏览器大多没啥毛病,但为了以防万一,在写代码的时候还是加上 .box{ display: -webkit-flex; /* Safari */ display: flex; }
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 属性描述父容器的属性flex-direction :该元素决定主轴的方向(即子元素的排列方向) 默认值 :row 适用于 :flex 容器
flex-wrap :设置或检索伸缩盒对象的子元素超出父容器时是否换行 默认值 :nowrap 适用于 :flex 容器
PS: .box { flex-flow: flex-direction flex-wrap|initial|inherit; } justify-content :定义了子元素在主轴上的对齐方式。 默认值 :flex-start 适用于 :flex 容器
align-items :定义了子元素在交叉轴上的对齐方式 默认值 :stretch 适用于 :flex 容器
align-items: stretch 时每个子元素的 height 必须为 auto 否则 height 属性会覆盖 stretch 的效果 如果 div 内没有内容,或者子标签内没有内容,将按照每个 div 的底部对齐 align-content :定义多根轴线的对齐方式,如果子元素只有一根轴线,该属性不起作用 默认值 :stretch 适用于 :多行的弹性盒模型容器
PS: 在上面的例子 flex-wrap 需设为 wrap,且数量超出一行,父容器的高度相对于子容器有多余,才能看到效果 子元素的属性order :定义子元素的排列顺序,数值越小,排列越靠前 默认值:0 适用于:flex子项和flex容器中的绝对定位子元素 PS:用整数值来定义排列顺序,数值小的排在前面。元素的值可以为负值 flex-grow :定义子元素的放大比例 默认值 :0 适用于 :flex子项 <ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex li {text-align:center;height:100px;} .flex li:nth-child(1){width:200px;background-color:green;} .flex li:nth-child(2){flex-grow:1;width:50px;background-color:yellow;} .flex li:nth-child(3){flex-grow:3;width:50px;background-color:red;} flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。 flex-shrink :定义子元素的收缩比例(与flex-grow相反) 默认值 :1 适用于 :flex子项 <ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;} .flex li{width:200px;} .flex li:nth-child(1){background:#888;} .flex li:nth-child(2){background:#ccc;} .flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;} flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。 PS:如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。如果一个项目的 flex-shrink 属性为0,其他项目都为 1,则空间不足时,前者不缩小。负值对该属性无效。 flex-basis :设置或检索弹性盒伸缩基准值 默认值 :auto 适用于 :flex子项 flex-basis 控制元素的默认尺寸,然后再由其他 Flexbox 属性控制,可以覆盖 width 属性 flex-basis 可以和 width 属性互换 PS:flex-basis 是通过主轴 (main axis) 来影响元素尺寸的 align-self:允许单个子元素有与其他项目不一样的对齐方式,可覆盖align-items属性 默认值 :auto 适用于 :flex子项
父元素: align-items:flex-end 参考
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |