学习flex布局整理
2019-12-03 本文已影响0人
湘兰沅芷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.flex-container {
/*chrome 4+,safari 3.1,ios safari 3.2+;*/
display: -webkit-box;
/*firefox 17-*/
display: -moz-box;
/*chrome 21+, safari 6.1+, ios safari 7+, opera 15/16;*/
display: -webkit-flex;
/*firefox 18+*/
display: -moz-flex;
/*IE 10;*/
display: -ms-flex;
/*chrome 29+, firefox 22+, IE 11+, opera 12.1/17/18, Android 4.4+;*/
display: flex;
/*flex-direction属性决定主轴方向*/
/*主轴的方向,伸缩流的方向*/
-webkit-flex-direction: row;
-ms-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
/*-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
flex-direction: row-reverse;*/
/*-webkit-flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;*/
/*-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;*/
/*flex-wrap属性定义，如果一条轴线排不下，如何换行*/
/*flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;*/
/*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap*/
/*flex-flow: row nowrap;*/
/*justify-content属性定义了项目在主轴上的对齐方式*/
/*左对齐*/
/*justify-content: flex-start;*/
/*右对齐*/
/*justify-content: flex-end;*/
/*居中*/
/*justify-content: center;*/
/*两端对齐,项目之间的间隔相等*/
/*justify-content: space-between;*/
/*每个项目两侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍*/
/*justify-content: space-around;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;*/
/*定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用*/
/*与交叉轴的起点对齐*/
/*align-content: flex-start;*/
/*与交叉轴的终点对齐*/
/*align-content: flex-end;*/
/*与交叉轴的中点对齐*/
/*align-content: center;*/
/*与交叉轴两端对齐,轴线之间的间隔平均分布*/
/*align-content: space-between;*/
/*每根轴线两侧的间隔都相等,所以轴线之间的间隔比轴线与边框的间隔大一倍*/
/*align-content: space-around;*/
/*默认值,轴线占满整个交叉轴*/
/*align-content: stretch;*/
}
.flex-item {
width: 300px;
/*项目属性*/
/*定义项目的排列顺序,数值越小,排列越靠前,默认为0*/
order: 0;
/*定义项目的放大比例,默认为0,即如果存在剩余空间也不放大*/
flex-grow: 0;
/*定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小*/
flex-shrink: 1;
/*定义了在分配多余空间前,项目占据的主轴空间.浏览器根据这个属性,
计算主轴是否多余空间,它的默认值为auto,即项目的本来大小
它可以设置为width或height属性一样的值(比如350px),即项目将占据固定空间*/
/*flex-basis: 100px;*/
/*flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto 后两个属性可选*/
/*属性有两个快捷值: auto(1 1 auto)和none(0 0 auto)
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值*/
flex: none;
/*align-self属性允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性
默认值为auto,标识继承父元素的align-items属性,如果没有父元素,则等同于stretch*/
/*align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;*/
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">12</div>
<div class="flex-item">13</div>
</div>
</body>
</html>
