Flex布局
Flex布局是在css3中引入的，又称“弹性盒模型”。该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。
弹性盒子的使用都必须伴随着父级设置display:flex;使用
1. 伸缩性(flex)
意思是让伸缩项目的宽高自动填充伸缩容器额外的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.boss {
width: 600px;
height: 300px;
border: 1px solid red;
display: flex;
}
.box1 {
flex: 1;
background-color: gray;
padding: 10px;
}
.box2 {
flex: 1;
background-color: aqua;
padding: 10px;
}
</style>
</head>
<body>
<div class="boss">
<div class="box1">北京时间9月14日，据Hoopshype记者Micheal Scotto报道，消息源透露，奇才虽然不想马上采取行动，但他们期待得到对达尼洛-加里纳利、兰德里-沙梅特和德朗-赖特的报价。加里纳利（680万）和赖特（820万）的合同都为到期合同，沙梅特合同还剩三年但保障金额只有23-24赛季的1025万美元。消息人士透露，加里纳利还没有与奇才进行买断谈判，上赛季他因十字韧带撕裂赛季报销，目前正专注于复出。</div>
<div class="box2">对于灰熊来说，这是一个苦乐参半的休赛季。他们将自己置于比历史上任何时刻都要高的位置，但最终却功亏一篑，站在废墟中间的罪魁祸首正是他们球队最好的球员。莫兰特上赛季表现出色，却因为自己的不成熟而搞砸了一切。莫兰特两次在社交媒体的不当行为——亚当-萧华称其行为“鲁莽”——被抓后，他和他的球队都陷入了困境。三月份，他因为有损联盟的行为被禁赛8场，而在第二次事件曝光后，灰熊彻底陷入了被动。</div>
</div>
</body>
</html>
给父级设置display:flex;后，会自动将页面宽度识别为12份，再给子级设置flex:数值（小于12），页面将会按照比例划分。
2. 伸缩流方向(flex-direction)
该属性决定主轴（x轴）的方向（项目排列的方向），可以设置排列方向（水平方向或垂直方向）。
flex-direction: row | row-reverse | column | column-reverse
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 300px;
background-color: gray;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">王谦真帅</div>
<div class="flex-item2">周天浩真帅</div>
<div class="flex-item3">汪涛真帅</div>
</div>
</body>
</html>
（1）row : 主轴为水平方向，起点在左端（默认值）。
给父级加flex-direction: row;
.flex-container {
display: flex;
flex-direction: row;
width: 400px;
height: 300px;
background-color: gray;
}
（2）row-reverse：主轴为水平方向，起点在左端。与row相反。
给父级加flex-direction: row-reverse;
.flex-container {
display: flex;
flex-direction: row-reverse;
width: 400px;
height: 300px;
background-color: gray;
}
（3）column：主轴为垂直方向，起点在上端。
给父级加flex-direction: column;
.flex-container {
display: flex;
flex-direction: column;
width: 400px;
height: 300px;
background-color: gray;
}
（4）column-reverse：主轴为垂直方向，起点在下端。与column相反。
给父级加flex-direction: column-reverse;
.flex-container {
display: flex;
flex-direction: column-reverse;
width: 400px;
height: 300px;
background-color: gray;
}
3.主轴对齐（justify-content）
该属性主要用来定义伸缩项目在主轴（X轴）上的对齐方式。
justify-content：flex-start | flex-end | center | space-between | space-around
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
.flex-item1 {
width: 50px;
height: 50px;
background-color: pink;
}
.flex-item2 {
width: 50px;
height: 50px;
background-color: aqua;
}
.flex-item3 {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
</body>
</html>
（1）flex-start：伸缩项目紧挨行头填充（默认值）
在父级加justify-content:flex-start;
.flex-container {
display: flex;
justify-content: flex-start;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（2）flex-end：伸缩项目紧挨行尾填充
在父级加justify-content:flex-end;
.flex-container {
display: flex;
justify-content: flex-end;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（3）center：伸缩项目居中紧挨着填充
在父级加justify-content:center;
.flex-container {
display: flex;
justify-content: center;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（4）space-between：伸缩项目会平均分布在行里。第一个伸缩项目在一行中的行首，最后一个申诉项目在一行中的行尾
在父级加justify-content:space-between;
.flex-container {
display: flex;
justify-content: space-between;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（5）space-around：伸缩项目会平均分布哎行里，两边留有一半的间隔空间，同时首尾两边和伸缩容器之间留有一半的间隔（1/2*20px=10px）
在父级加justify-content:space-between;
.flex-container {
display: flex;
justify-content: space-around;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
4.侧轴对齐（align-items）
该属性主要用来定义伸缩项目在侧轴（Y轴）上的对齐方式。
align-items：flex-start | flex-end | center | baseline | stretch
（1）flex-start：伸缩项目的侧轴（Y轴）起始位置的边界紧靠住该行的侧轴起始边界
给父级加align-items:flex-start;
.flex-container {
display: flex;
align-items: flex-start;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（2）flex-end：伸缩项目的侧轴（Y轴）起始位置的边界紧靠住该行的侧轴结束边界
给父级加align-items:flex-end;
.flex-container {
display: flex;
align-items: flex-end;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（3）center：伸缩项目在该行的侧轴（Y轴）上居中放置
给父级加align-items:center;
.flex-container {
display: flex;
align-items: center;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（4）baseline：伸缩项目根据伸缩项目的第一行文字的基线对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
align-items: baseline;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
font-size: 20px;
background-color: pink;
}
.flex-item2 {
width: 100px;
height: 50px;
font-size: 10px;
background-color: aqua;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">王谦最帅</div>
<div class="flex-item2">师傅第二</div>
<div class="flex-item3">傻涛第三</div>
</div>
</body>
</html>
（5）stretch：伸缩项目拉伸填满整个容器
.flex-container {
display: flex;
align-items: stretch;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
若不给子级设置高度，伸缩项目则会拉甚填满整个容器
若給子级设置高度，则会显示设置后的高度
5.伸缩换行（flex-wrap）
该属性用于指定弹性盒子的子元素换行方式
flex-wrap: nowrap | wrap | wrap-reverse
（1）nowrap：默认， 伸缩容器为单行。该情况下弹性子项可能会溢出容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
</body>
</html>
（2）wrap：伸缩容器为多行。该情况下伸缩子项溢出的部分会被放置到新行，子项内部会发生断行
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
（3）wrap-reverse：反转wrap排列
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
width: 400px;
height: 200px;
background-color: yellowgreen;
}
6.align-content
用于修改flex-wrap的属性，但它不是设置弹性子元素的对齐，而是设置各个行的对齐
align-content: flex-start | flex-end | center | space-between | space-around | stretch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
</body>
</html>
（1）stretch：各行将会伸展以占用剩余的空间（默认）
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: stretch;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
（2） flex-start：各行向弹性盒容器的起始位置堆叠
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
（3）flex-end：各行向弹性盒容器的结束位置堆叠
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
（4）center ：各行向弹性盒容器的中间位置堆叠
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: center;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
（5）space-between：各行在弹性盒容器中平均分布
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
width: 400px;
height: 500px;
background-color: yellowgreen;
}
（6）space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
width: 400px;
height: 500px;
background-color: yellowgreen;
}
7.align-self
用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式
注：给子元素设置！！
align-self: auto | flex-start | flex-end | center | baseline | stretch
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
.flex-container {
display: flex;
width: 400px;
height: 500px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
align-self: flex-end;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
align-self: flex-start;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
align-self: center;
}
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
.flex-container {
display: flex;
width: 400px;
height: 500px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
align-self: baseline;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
align-self: stretch;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
align-self: auto;
}
8.order
弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，可以为负值，负值<0<正值
注：给子元素设置！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">111</div>
<div class="flex-item2">222</div>
<div class="flex-item3">333</div>
</div>
</body>
</html>
分别给三个盒子设置order,并设置不同大小
.flex-container {
display: flex;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
order: 0;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
order: 1;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
order: -1;
}
可以看出order值越大，排在越后面，order值越小，排在最前面
9.flex-flow
该属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow: flex-direction flex-wrap;
flex-direction代表的值有：row | row-reverse | column |column-reverse
flex-wrap代表值有：nowrap | wrap | wrap-reverse
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
flex-flow: column wrap;
width: 400px;
height: 300px;
background-color: yellowgreen;
}
.flex-item1 {
width: 100px;
height: 100px;
background-color: pink;
}
.flex-item2 {
width: 100px;
height: 100px;
background-color: aqua;
}
.flex-item3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">111</div>
<div class="flex-item2">222</div>
<div class="flex-item3">333</div>
<div class="flex-item1">111</div>
<div class="flex-item2">222</div>
<div class="flex-item3">333</div>
</div>
</body>
</html>
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
