css基础教程之flex布局
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>腾讯云开发者
