关于 flex 基础 以及 兼容性写法(一)
知识来源:
https://blog.csdn.net/cddcj/article/details/52131089
https://www.runoob.com/w3cnote/flex-grammar.html
在线实验:
https://www.runoob.com/try/try.php?filename=trycss3_flex-direction
弹性布局 flex 具有很方便的布局能力,但是部分浏览器对 flex 并不是很友好
2.容器属性
2.2、flex-wrap: 决定 子元素 换不换行,如何换行
2.3、flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
2.5、align-items 定义项目在 垂直 交叉轴上如何对齐
2.6、align-content 针对用于 容器 下的 多行 子元素 进行 位置布局(一般与flex-wrap配合使用),如果没用拥有多行子元素,则失效;
==================================================================下面是复制的了。。
4.项目属性
。order:项目的排列顺序
。flex
。flex-grow 放大比例
。flex-shrink 缩小比例
。flex-basis 主轴空间大小
。align-self 允许单个项目有与其他项目不一样的对齐方式
4.1 order 定义项目的排列顺序
-》order: <integer>;
数值越小,排列越靠前,默认为0;
4.2 flex-grow
-》 flex-grow: <number>; /* default 0 */
项目的放大比例,默认是0,即若存在剩余空间,也不放大。
flex-grow属性都为1,将等分剩余空间;
flex-grow属性为2,其他都为1,则前者占据的剩余空间比其他项多一倍。
4.3 flex-shrink
-》flex-shrink: <number>; /* default 1 */
项目的缩小比例,默认是1,即空间布局,该项目将缩小。
flex-shrink属性都为1,将等比例缩小;
若一个项目flex-shrink属性为0,其他都为1,则空间不足时,设为0的不缩小。
负值对该属性无效。
4.4 flex-basis
-》flex-basis: <length> | auto; /* default auto */
在分配多余空间之前,项目占据的主轴空间大小。默认为auto,即项目的本来大小。
被省略为0%,零尺寸。
4.5 flex
-》flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex属性是 flex-grow,flex-shrink,flex-basis缩写,默认为0 1 auto。
后两个属性可选。
该属性有两个快捷值:auto( 1 1 auto)和none( 0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
详细:其中<flex-basis>被省略默认为0%
<flex-basis>指定auto,取决于自身<width>,若宽没定义,则长度取决于内容。
flex:1 == flex: 1 1 0%;
flex:none == flex:0 0 auto;
flex:auto == flex:1 1 auto;
例如:<div>
<p id="p1">Hello</p>
<p>Hello</p>
</div>
div{ width:300px; display:flex; }
div #p1{ flex:1; }
【flex:1 意思是设置后DIV有灵活的长度,即其余auto宽度后, 剩余的的都是flex:1它的】
4.6 align-self
-》align-self: auto | flex-start | flex-end | center | baseline | stretch;
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。