flex布局
2017-04-18 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style type="text/css">
.box{
width: 700px;
height: 500px;
border:2px red solid;
/*设置为弹性布局*/
display: flex;
/*设置容器内部元素的排列方式（主轴方向）
row 从左往右
row-reverse 从右往左
column 从上往下
column-reverse 从下往上*/
flex-direction: row;
/*换行
nowrap 不换行
wrap 正常换行
wrap-reverse反向换行（第一排在下面，后面的依次往上排）
1.不换行的情况下，如果元素的总宽度超过容器，会按比例均分容器宽度（和table一样）
2.换行只有在元素一行放不下的情况下才会换行
*/
flex-wrap: wrap;
/*flex-flow
复合写法，包含flex-direction和flex-wrap两个属性*/
font-size: 40px;
text-align: center;
/*当元素不够一行的时候，元素的排列方式
flex-start顶头显示
flex-end靠末尾显示
center 居中显示
space-between中间有空格
space-around：四周有空格*/
justify-content:flex-end;
/*flex-strat 顶部对齐；
flex-end 底部对齐
center 居中对齐
baseline 文字基线对齐
stretch 默认，没有设置元素宽和高的时候，可以拉伸，充满整个容器*/
align-items: baseline;
}
.box .div{
width: 100px;
height: 80px;
background-color: greenyellow;
}
.box .div1{
width: 100px;
height: 80px;
background-color: greenyellow;
/*font-size: 100px;*/
line-height: 90px;
}
.box .div2{
width: 100px;
height: 130px;
background-color: greenyellow;
/*该元素排列的顺序，值越小越靠前*/
order: -1;
}
.box .div3{
width: 100px;
height: 240px;
background-color: greenyellow;
/*当空间不足的情况下，该元素缩小的比例（只有不换行的时候才会空间不足）*/
flex-shrink: 3;
}
.box .div9{
/*让该元素按比例平分剩余空间*/
/*flex-grow: 3;*/
/*在主轴方向上的大小
排列方式为row的话，主轴在X轴，代表是宽度
排列方式为column的话，主轴在Y轴，代表是高度*/
flex-basis: 300px;
}
.box .div10{
/*flex-grow: 1;*/
/*属性为该元素单独设置排列方式*/
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="div1 div">1</div>
<div class="div2 div">2</div>
<div class="div3 div">3</div>
<div class="div4 div">4</div>
<div class="div5 div">5</div>
<div class="div6 div">6</div>
<div class="div7 div">7</div>
<div class="div8 div">8</div>
<div class="div9 div">9</div>
<div class="div10 div">10</div>
</div>
</body>
</html>
