<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex布局-垂直竖直居和设置在子项目中的属性</title> <style> /* flex布局和inline-flex的区别:前者容器升级为块级盒子,后者容器升级为行内盒子,对外部其他元素来说就是是否独占一行的区别。 元素采用flex布局后,子元素的float,clear,vertivcal-align属性都将失效*/ /* 容器属性 6 */ /* 1、flex-direction的作用:规定(主轴)为哪个方向,默认是水平方向 */ /* 2、flex-wrap的作用:溢出是否换行(子项目总宽度 > 容器宽度) */ /* 3、flex-flow的作用:flex-direction 和flex-wrap 的简写,默认为 row nowrap */ /* 4、justify-content的作用:指定(主轴)水平方向的对齐方式, */ /* 5、align-items的作用:指定(交叉轴)水平方向的对齐方式,也可以说成指定(主轴)的垂直方向的对齐方式 */ /* 6、align-content的作用:一个容器内多根主轴存在才生效,作用跟align-items一样 */ /* 子项目属性 6 */ /* 1、 flex-basis的作用:是设置初始的宽度的,默认为auto,优先级比width高,如果同时和width设置了具体的数值,以flex-basis为准。 如果存在min-width 或 max-width,flex-basis的宽度活动范围在两者之间才能生效,小于最小(min-width),只取(min-width),大于最大(max-width),只取(max-width),而在其访问内可以随意设置大小*/ /* 2、 flex-grow的作用:容器总空间 > 子项目总空间的时候生效,说人话就是容器宽度方向还有剩余空间的时候生效。不过生效的前提是子项目也设置了这个属性,否则也没用。(flex-grow: 0) 计算规则是 子项目总的flex-grow相加 =剩余容器的空间,得到一个flex-grow的量,再乘以每个项目自己所拥有的量,就是分配到的宽度,和原始宽度(相加)起来就是变化后的总宽度 例如 5x + 1x = 600px,x=100px 200+500=700px; 200+100 = 300px; */ /* 3、 flex-shrink的作用: 和flex-grow类似,只不过一个放大,一个缩小,容器总空间 < 子项目总空间的时候生效,说人话就是容器宽度方向已经容纳不下所有子项目了。这个属性在满足该条件后自动生效(flex-shrink:1) 计算规则是: 子项目的flex-shrink相加 = 不足容器的空间,得到一个flex-shrink的量,再乘以每个项目所拥有的flex-shrink的量,就是分配到的宽度,和原始宽度(相减)就是变化后的总宽度*/ /* 4、 order的作用:order值越小越靠前 */ /* 5、 align-self的作用,设置单个项目垂直方向的位置,与align-item的区别是多个和一个的区别,而且align-self是设置在自身项目上的,align-item是设置在容器上面的*/ /* 6、 flex的作用 flex = flex.grow + flex.shirnk + flex.basis 默认为(0,1,auto)*/ .wrapper{ display: flex; flex-wrap: nowrap; width: 1000px; height: 500px; background-color: grey; justify-content: center; align-items: center; align-content: space-around; } .item{ height: 200px; flex-basis: 200px; } .item1{ background-color: green; flex-grow: 5; flex-shrink: 5; order: 2; } .item2{ background-color: orange; flex-grow: 1; flex-shrink: 1;; align-self: flex-start; order: 1; } </style> </head> <body> <div class="wrapper"> <div class="item item1">1</div> <div class="item item2">2</div> <!-- <div class="item item1">3</div> <div class="item item2">4</div> --> </div> </body> </html>