<!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>