一、flex布局的语法
块级元素 ：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示
行内元素 ：display: inline–flex ———— 将容器盒模型作为内联级弹性伸缩盒显示
设置flex布局后，flex item的float、clear和vertical-align 属性都失效
二、容器属性
flex的排列属性：
| 元素名称 | 说明 |
|
设置从上到下排列 |
|
|
设置从下到上排列 |
#div{
display:flex;
flex-direction：column
}—————— 当子级flex为1时，设置属性自动均分flex换行属性：
| 元素名称 | 说明 |
当 flex-wrap: nowrap 时 ———— 默认值，都在一行或一列显示：
当 flex-wrap：wrap 时 ————伸缩项目无法容纳时，自动换行 ：
当 flex-wrap：wrap-reverse 时 ———— 伸缩项目无法容纳时，自动换行，方向和 wrap 相反 ：
flex-flow: row wrap; ———— 可同时设置排列方向和换行
伸缩属性：
| 元素名称 | 说明 |
|
伸缩项目以起始点靠齐 |
|
|
伸缩项目以中心点靠齐 |
|
|
伸缩项目平均分布 |
|
当 justify–content：flex-start 时 ————伸缩项目以起始点靠齐 ：
当 justify–content：flex-end 时 ———— 伸缩项目以结束点靠齐 ：
当 justify–content：center 时 ———— 伸缩项目以中心点靠齐 ：
当 justify–content：space–between 时 ———— 伸缩项目平均分布 ：
当 justify–content：space-around 时 ———— 伸缩项目平均分布，但两端保留一半的空间 ：
align–items属性： ———— 处理伸缩项目容器的额外空间
| 元素名称 | 说明 |
align-content属性： ———— 定义了多根轴线对齐方式
align-content这个属性设置排列方向之后，并且设置换行，这个属性才会起作用。
会拉伸每个项目的所占空间，填充方式为每个项目的下方去增加空白，每一个项目默认从容器顶端开始排列。
| 元素名称 | 说明 |
|
与交叉轴的中点对齐 |
|
|
轴线占满整个交叉轴 |
当 align-content：flex-start 时 ———— 与交叉轴的起点对齐 :
当 align-content：flex-end 时 ———— 与交叉轴的终点对齐 ：
当 align-content：center 时 ———— 与交叉轴的中点对齐 :
当 align-content：space-between 时 ———— 与交叉轴两端对齐，轴线之间的间隔平均分布 :
当 align-content：space-around 时 ———— 每根轴线两侧的间隔都相等，所以，轴线之间的间隔比线与边框的间隔大一倍：
当 align-content：stretch 时 ———— 轴线占满整个交叉轴
三、项目属性
结构：
<body>
<div id="box">
<div class="item">1111</div>
<div class="item">2222</div>
<div class="item">3333</div>
<div class="item">444</div>
</div>
</body>order 定义项目的排列顺序，数值越小排列越靠前，默认为0
例：
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 定义项目的排列顺序，数值越小排列越靠前，默认为0 */
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
width: 100px;
background-color: gold;
}
.item:first-child {
height: 20px;
margin-right: 10px;
order: 3;
}
.item:nth-child(2) {
height: 30px;
margin-right: 10px;
}
.item:nth-child(3) {
height: 70px;
margin-right: 10px;
order: 0;
}
.item:last-child {
height: 50px;
margin-right: 10px;
order: 2;
}
</style> 
flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
例：
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
background-color: gold;
flex-grow: 1;/* 分配剩余平均空间 ，
平均分配的含义是，去掉内容后的空间进行均分，
如果本身内容多，虽然均分，但还是占比较大空间*/
}
.item:first-child {
height: 20px;
}
.item:nth-child(2) {
height: 30px;
}
.item:nth-child(3) {
height: 70px;
}
.item:last-child {
height: 50px;
}
</style>
flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
例：
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
width: 200px;
background-color: gold;
}
.item:first-child {
height: 20px;
flex-shrink: 0;
/* 不缩放 */
}
.item:nth-child(2) {
height: 30px;
}
.item:nth-child(3) {
height: 70px;
flex-shrink: 5;
/* 严重缩放 */
}
.item:last-child {
height: 50px;
}
</style>
flex-basls 定义在分配多余空间之前，项目占据的主轴空间
例：
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置同一行内排列属性，默认值为平均分配 */
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
height: 50px;
text-align: center;
border: 1px solid aqua;
background-color: gold;
/* 第一步：平均分配剩余空间 */
flex-grow: 1;
}
.item:first-child {
background-color: #FFFF00;
/* 第二步，想占多少地方，可以设置宽度 */
-width: 150px;
flex-basis: 150px;
-flex-basis: 40%;
-flex-basis: 20rem;
}
.item:nth-child(2) {
background-color: chocolate;
/* 第三步：默认值auto */
flex-basis: auto;
}
.item:nth-child(3) {
background-color: #008000;
}
.item:last-child {
background-color: red;
}
</style>
align-self 定义交叉轴上的对齐方式，可单独设置父级下的子级位置
例：
<style type="text/css">
*{margin: 0;padding: 0;box-sizing: border-box;}
#box{
width: 600px;height: 300px;margin: 100px auto;
background-color: skyblue;
display: flex;
align-items: center;
}
.item{
background-color: red;
border: 1px solid yellow;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
flex: 1;
}
.item:first-child{
background-color: gold;
}
.item:nth-child(2){
background-color: chocolate;
align-self: flex-start;
-align-self: flex-end;
-align-self: baseline;
-align-self: stretch;
}
.item:last-child{
background-color: green;
align-self: flex-end;
}
</style>
flex 是复合属性，代表flex-grow，flex-shrink和 flex-basis的简写
原文地址:https://blog.csdn.net/chhhhh0403/article/details/124763959
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_40490.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
