收藏
天蓬老师批改状态：合格
老师批语：回想起自己第一次接触flex布局时, 感觉 之前的知识 白学了, 原来布局可以这样简单, 随着学习深入, 对它有了更深的认识, 相信随着你对它的了解, 会越来越喜欢的
| 属性单词 | 属性介绍 |
|---|---|
| flex-basis | 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度 |
| flex-grow | 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目 |
| flex-shrink | 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减 |
| flex | 是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis |
| align-self | 单独自定义某个项目在交叉轴上的对齐方式 |
| order | 自定义项目在主轴上的排列顺序,默认为0,书写顺序,值越小位置越靠前 |
HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex项目属性</title>
<style>
.container {
width: 400px;
height: 100px;
outline: 2px dashed gray;
background-color: lightgray;
}
.container > .item {
width: 100px;
height: 60px;
outline: 2px dashed red;
background-color: wheat;
text-align: center;
line-height: 60px;
font-size: 2rem;
}
.container {
/*转为flex容器*/
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
flex-basis 项目宽度
flex-basis: auto; 默认值 auto:项目的原始宽度
属性值：可以是长度单位，也可以是百分比，百分比是按照父元素的width为标准。
注：显示宽度flex-basis > 原始宽度width
.container > .item {
/*项目宽度150*3 =450；父元素width:400;*/
flex-basis: 150px;
}
显示宽度大于父元素宽度是，项目自动缩减
.container > .item {
/*1.项目宽度：项目再分配主轴剩余空间之前,项目所占的主轴空间的宽度*/
/*flex-basis: auto;*/
/*flex-basis: 80px;*/
flex-basis: 30%; /*每个像素显示宽度120px;原始宽度100px;*/
}
设置最小宽度min-width时，按min-width宽度显示
flex-grow 项目的扩展: 将主轴上的剩余空间分配给项目
flex-grow: 0; 默认值0：不扩展
属性值：0-1 按比例分配剩余空间
.container > .item:nth-child(1) {
/*此时项目1 140px,项目2,3各100px， 剩余空间 = 400 - 140 - 100 - 100 = 60px*/
flex-basis: 140px;
flex-grow: 1; /*项目1实际分配剩余空间20px + 140px = 160px宽度*/
}
.container > .item:nth-child(2) {
flex-grow: 2; /*项目2实际分配剩余空间100px + 20px * 2 =140px;*/
}
属性值：>=1 按份分配剩余空间
.container > .item {
/*每个项目分配到剩余空间的100 / 3 = 33.333+ 占据空间100 = 133.333px*/
flex-grow: 1;
}
当项目设置宽度140px时；剩余空间：400-100-100-140=60px
.container > .item {
/*每个项目分配到剩余空间的100 * 0.2 = 20 + 占据空间100 = 120px*/
flex-grow: 0.2;
}
flex-shrink 项目的宽度收缩: 将项目上的多出来的空间按比例在项目之间进行缩减
默认值1：空间不足时按比例进行缩小
.container > .item:nth-child(1) {
/*只设置一个项目收缩值时，没有设置的项目全部按1进行计算*/
/*收缩比例值=100/（6+1*4） = 10 */
/*第一个项目收缩10*6=60px;剩下四个项目每个收缩10px*/
flex-shrink:6;
}
项目flex-shrink值的总和小于1 则收缩尺寸不完全
.container > .item:nth-child(-n+4) {
/*每个项目收缩22.222*/
flex-shrink: 2;
}
.container > item:last-child {
/*项目收缩值为4*2+1 = 9； 最后一个项目收缩值=100/9*1=11.111 显示宽度88.88px*/
flex-shrink: 1;
}
项目flex-shrink值总和大于1 按比例收缩
.container > .item {
/*0.1*5个项目 = 0.5;每个项目收缩100*0.1=10px;*/
flex-shrink: 0.1;
}
只设置一个项目flex-shrink值时，其他项目按1进行计算
.container > .item {
flex-shrink:1;
}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="public-header.css"> <link rel="stylesheet" href="font/iconfont.css"> <title>导航</title></head><body><div class="public-header"> <a href="">网站首页</a> <a href="">专题</a> <a href="">网站导航</a> <a href="">二手商品</a> <a href="">讨论区</a> <span> <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a> <a href="">免费注册</a> </span></div><!--大标题--><div class="public-headline"> <span>二手交易</span></div></body></html>
/*引入公共初始化样式表*/@import "reset.css";/*头部导航*/.public-header { height: 44px; background-color: black; padding: 0 20px; display: flex; flex-flow: row nowrap;}.public-header a { line-height: 44px; color: #ccc; padding: 0 10px;}.public-header a:hover { background-color: #fff; color: black;}.public-header > span { margin-left: auto;}.public-header > span i { font-size: 16px; color: #cccccc; padding-right: 10px;}/*大标题*/.public-headline { padding: 30px; text-align: center;}.public-headline span { font-size: 30px; font-weight: bolder; padding-bottom: 7px; border-bottom: 3px solid red;}
天蓬老师
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
