收藏
Guanhui批改状态：合格
老师批语：写的很好！很认真！
flex仅适用于简单的线性布局
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 500px;border: 1px sienna solid;/*如果这个容器的内容要使用FLex布局，第一步需要将此容器转换为弹性盒布局*/display: flex;}/*一旦将父元素转换为弹性盒布局，里面的子元素自动成为 弹性项目 必须是子元素。孙元素不行不管这个项目标签之前是什么类型，都转换为行内块可以设置宽度和高度*/.container>.item {flex: auto;height: 50px;}</style></head><body><div class="container"><div class="item">1</div><a class="item">2</a><span class="item">3</span><div class="item">4</div></div></body></html>
页面效果如下：
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 300px;display: flex;}.container>.item {/* width: 50px;*//*会剩余50像素的剩余空间*/width: 120px;/*内容会被缩放*/}/*换行显示*/.container {flex-wrap: wrap;/*默认是nowrap 不换行*/}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body></html>
justify-content: flex-start;/*默认值，项目位于容器的开头。剩余空间在最右侧*/
justify-content: flex-end;/*项目位于容器的结尾，剩余空间在最左侧*/
justify-content: center;/*项目位于容器的中心。剩余空间平均分配在两侧*/
justify-content: space-between;/*两端对齐，剩余空间在除了首尾项目之外的所有项目之间分配*/
justify-content: space-around;/*分散对齐,剩余空间在每个项目两侧分配*/
justify-content: space-evenly;/*平均分配，每个项目之间的剩余空间是相等的*/
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Flex弹性盒布局多行容器中的项目对齐方式</title><style>.container {width: 300px;display: flex;flex-wrap: wrap;height: 150px;/*align-content 为多行容器设置项目对齐方式*/align-content: stretch;/* 默认值 */}.container>.item {width: 60px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div></body></html>
/*1.容器剩余空间在项目两边如何分配，将所有项目视为一个整体*/align-content: flex-start;/*项目在开始*/
align-content: flex-end;/*项目在结尾*/
align-content: center;
justify-content: space-between;/*两端对齐，剩余空间在除了首尾项目之外的所有项目之间分配*/
align-content: space-around;
align-content: space-evenly;
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>项目在交叉轴上的排列</title><style>.container {width: 300px;height: 150px;display: flex;/*项目在交叉轴上默认是拉伸的*/align-items: stretch; /*默认值*/}.container>.item {width: 60px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
align-items: flex-start;
align-items: flex-end;
align-items: center;
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>项目在交叉轴上的排列</title><style>.container {width: 300px;height: 150px;display: flex;/*默认是row nowrap*/flex-flow: column nowrap;}.container > .item {width: 60px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body></html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>主轴在垂直方向的项目排列</title><style>.container {width: 300px;height: 150px;display: flex;flex-direction: column; /*默认是row*/}.container > .item {}</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布局相对于浮动和定位，难以理解。要多实践多思考，才能掌握于心。加油！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
