flex布局
main axis :水平的主轴
cross axis ：垂直的交叉轴
main start :主轴的开始位置
main end :主轴的结束位置
cross start :交叉轴的开始位置
cross end :交叉轴的结束位置
项目默认沿主轴排列.
main size 单项目占据的主轴空间
cross size 单个项目占据的交叉主轴空间
flex-direction: row/row-reverse/column-reverse;改变主轴
row:默认值，从左到右
row-reverse:从右到左
column:从上往下
column-reverse:从下往上
justify-content:space-between/flex-start/flex-end/space-around；定义项目的对齐方式
space-between:两端对齐
flex-start:（左居中对齐）从主轴的开始位置开始排列；
flex-end; （右居中对齐）从主轴的结束位置开始排列；
center; （居中对齐，无间隔）居中；
space-around;（居中对齐，有间隔）；拉手对齐，环绕对齐；
flex-wrap:决定项目换行；
nowrap:默认值，不换行
wrap:换行显示；
wrap-reverse:反向换行；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:1000px;
height:700px;
border:1px solid deeppink;
margin:auto;
/* flex布局*/
display:flex;
flex-direction:row-reverse;
justify-content:space-around;
flex-wrap: wrap;
}
.box .box1{
width:150px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
<div class="box1">5</div>
<div class="box1">6</div>
<div class="box1">7</div>
<div class="box1">8</div>
<div class="box1">9</div>
<div class="box1">10</div>
<div class="box1">11</div>
<div class="box1">12</div>
<div class="box1">13</div>
<div class="box1">14</div>
<div class="box1">15</div>
</div>
</body>
</html>
2258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
