项目属性
下面介绍下项目属性。容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul
,项目属性给li
差不多一个意思。
以下6个属性设置在项目上:
- order:用于决定项目排列顺序,默认为0,取值越大,越排在后面,可以取负值。
- flex-grow:定义项目的放大比例,默认为 0 ,即如果不存在剩余空间,也不放大。
- flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 负值对该属性无效。
- flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。
- flex:
flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。 - align-self:设置单个项目的对齐方式,
align-self
:auto
|flex-start
|flex-end
|center
|baseline
|stretch
;
order属性
order的值是整数,默认为0,整数越小,item排列越靠前,用于决定项目排列顺序。取值越大,越排在后面,可以取负值。
基本语法格式如下:
.item {
order: <integer>;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
height: 800px;
background-color: yellow;
display: flex;
}
div {
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
}
.item1 {
order: 4;
}
.item2 {
order: 3;
}
.item3 {
order: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
</body>
</html>
flex-grow属性
flex-grow属性定义项目的放大比例,默认为 0 ,即如果不存在剩余空间,也不放大。
基本语法格式如下:
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间
将比其他项多一倍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 500px;
background-color: yellow;
display: flex;
}
div {
width: 100px;
height: 100px;
background-color: red;
outline: 1px solid #FFFFFF;
}
.item4 {
flex-grow: 1;
}
.item5 {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
</body>
</html>
flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 负值对该属性无效。
基本语法格式如下:
.item {
flex-shrink: <number>; /* default 1 */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
background-color: yellow;
display: flex;
}
div {
height: 100px;
background-color: red;
outline: 1px solid #FFFFFF;
}
.item1 {
width: 100px;
flex-shrink: 0;
}
.item2 {
width: 200px;
flex-shrink: 1;
}
.item3 {
width: 300px;
flex-shrink: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
基本语法格式如下:
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
基本语法格式如下:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
基本语法格式如下:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-self属性允许item有自己独特的在交叉轴上的对齐方式,该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
- auto:和父元素align-self的值一致
- flex-start:顶端对齐
- flex-end:底部对齐
- center:竖直方向上居中对齐
- baseline:item第一行文字的底部对齐
- stretch:当item未设置高度时,item将和容器等高对齐
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
基本语法格式如下:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-self属性允许item有自己独特的在交叉轴上的对齐方式,该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
- auto:和父元素align-self的值一致
- flex-start:顶端对齐
- flex-end:底部对齐
- center:竖直方向上居中对齐
- baseline:item第一行文字的底部对齐
- stretch:当item未设置高度时,item将和容器等高对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
height: 800px;
background-color: yellow;
display: flex;
align-items: center;
}
div {
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
}
.item1 {
order: 4;
align-self: flex-start;
}
.item2 {
order: 3;
}
.item3 {
order: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
</body>
</html>
网格布局 - 平均分布
最简单的网格布局,就是平均分布。在容器里面平均分配空间,但是需要设置项目的自动缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
}
.item {
flex: 1;
background-color: red;
margin: 3px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
百分比布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 500px;
height: 50px;
background-color: green;
}
.box div {
outline: 1px solid #FFFFFF;
}
.item1 {
flex: 0 1 50%;
background-color: red;
}
.item2 {
flex: 0 1 25%;
background-color: red;
}
.item3 {
flex: 0 1 15%;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
flex: 1;
background-color: #92D050;
}
footer {
flex: 1;
background-color: #FFC000;
}
.content-main {
display: flex;
flex: 1;
}
.main-middle {
flex: 1;
background-color: #FBE5D6;
}
.main-left {
flex: 0 1 12em;
background-color: #00B0F0;
}
.main-right {
/* 两个边栏的宽度设为12em */
flex: 0 1 12em;
background-color: #ED7D31;
}
</style>
</head>
<body class="content">
<header>header</header>
<div class="content-main">
<nav class="main-left">left</nav>
<main class="main-middle">center</main>
<aside class="main-right">right</aside>
</div>
<footer>footer</footer>
</body>
</html>
流式布局
每行的项目数固定,会自动分行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 200px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</body>
</html>