老雷html/css开发视频教程之flex布局
一、display:flex;
二、flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置
flex-direction:row | row-reverse | column | column-reverse
row: 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。
row-reverse: 对齐方式与row相反。
column: 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。
column-reverse: 对齐方式与column相反。
三、flex 设置或检索弹性盒模型对象的子元素如何分配空间
flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
div{
flex:1;
}
.flex{width:600px;}
.a{width:200px;}
.b{flex-grow:1;width:50px;}
.c{flex-grow:3;width:50px;}
<div class="flex">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div>
1、flex-grow 设置或检索弹性盒的扩展比率 flex宽度比内容宽度大
flex剩余宽度 600-200-50-50=300px
b=50+300/4=125;
c=50+300/4*3=275;
2、flex-shrink 设置或检索弹性盒的收缩比率 flex宽度比内容宽度小
flex-shrink:<number> 默认 1
.flex{width:400px;}
.a{width:200px;}
.b{width:100px;}
.c{flex-shrink:3;width:300px;}
<div class="flex">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div>
flex超出宽度 400-200-100-300=-200;
需要分配a,b,c为 1+1+3=5;
实际宽度 a=200-200*1/5=160 b=100-200*1/5=60 c=300-200*3/5=180
3、flex-basis 设置或检索弹性盒伸缩基准值
flex-basis:<length> | <percentage> | auto | content
<length>: 用长度值来定义宽度。不允许负值
<percentage>: 用百分比来定义宽度。不允许负值
auto: 无特定宽度值,取决于其它属性值
content 基于内容自动计算宽度
四、align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
row竖向对齐
align-items:flex-start | flex-end | center | baseline | stretch
五、justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
row 横向对齐
justify-content:flex-start | flex-end | center | space-between | space-around
六、flex-wrap 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
flex-wrap:nowrap | wrap | wrap-reverse
nowrap 容器为单行。该情况下flex子项可能会溢出容器
wrap flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse 反转 wrap 排列。
七、align-content 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式
align-content:flex-start | flex-end | center | space-between | space-around | stretch
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex</title> <style> .flex{ display: flex; flex-direction: row; margin-bottom: 5px; align-items: center; justify-content:center; align-content:center; height: 200px; flex-wrap: wrap; } .flex-1{ flex: 1; background-color: #FF6600; } .w200{ width: 200px; height: 100px; background-color: #0F8E82; } </style> </head> <body> <div class="flex"> <div class="w200">是是是</div> <div class="flex-1">啊啊</div> <div><div>xx</div><div>xx</div></div> </div> <div class="flex"> <div class="flex-1"></div> <div class="w200"></div> </div> <div class="flex"> <div class="w200"></div> <div class="flex-1"></div> <div class="w200"></div> </div> </body> </html>