flex 布局

本文地址：https://www.cnblogs.com/veinyin/p/9547215.html 

 

本文主要是笔者的 flex 学习笔记

一、当父元素给 flex 后，子元素的 float  clear  vertical-align 属性均不起作用

二、父元素一共有 6 个属性

　　1 flex-direction   row  column  row-reverse  column-reverse 

　　　　主轴方向  默认是水平方向 

　　2 flex-wrap   no-wrap  wrap  wrap-reverse  

　　　　是否换行 默认不换行  区别在于第一行从最上面还是最下面开始

　　3 flex-flow   flex-direction  flex-wrap

　　　　上面两个属性的简写形式

　　4 justify-content    flex-start  flex-end  center  space-around   space-between

　　　　主轴上对齐方式

　　5 align-items   flex-start  flex-end   center   stretch   baseline

　　　　交叉轴对其方式

　　6 align-content   flex-start   flex-end   stretch  space-around  space-between

　　　　多根轴线对齐方式

三、子元素有 6 个属性

　　1 order  number  

　　　　默认为 0   越小排放越靠前

　　2 flex-grow  number

　　　　放大比例  默认为 0   占据剩余空间比例

　　3 flex-shrink  number

　　　　缩小比例  默认为 1  会等比缩小  0 不变 

　　4 flex-basis   auto  像素值

　　　　占据宽度值  默认为 auto   给定像素则固宽

　　5 flex   flex-grow  flex-shrink  flex-basis 

　　　　以上三个属性的简写

　　6 align-self    auto  flex-start  flex-end  center  stretch  baseline

　　　　对元素单独设置对齐方式   默认 auto  继承样式

四、flex-grow 计算

<div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

　　

　　上面 content 里有三个 item，首先给父元素一个固宽600px

　　如果没有给 item 宽度，但是给 item 设置了 flex-grow 属性，值分别是 1   2   1 ，那么它们的宽度就是 1 ：2 ：1 ，150  300  150

　　如果给 item 设置了宽度 100px , flex-grow 属性 1  2  1 ，那么宽度就是设置的宽度 + (600 - 300) * 所占比例 。 100 +  300 * 1 / 4 ,  100 + 300 * 2 / 4 , 100 + 300 * 1 / 4 ,   175  250 175

END~~~≥ω≤