收藏
天蓬老师批改状态：合格
老师批语：
布局的传统解决方案，基于盒子模型，依赖 display + position + float，某些特殊布局很不方便，比如，垂直居中就不容易实现，为了解决这个问题，我们学习了flex弹性盒子
1.任何元素都可以通过添加display: flex属性,转为弹性盒元素,也叫flex容器
2.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
3.转为flex元素后,它的内部的”子元素”就支持flex布局了
4.flex容器中的”子元素”称之为: flex项目
5.所有容器中的项目自动变成”行内块级元素”
flex-direction：决定主轴的方向
1：默认值row （水平方向）
2：column （垂直方向）。
flex-wrap：决定换不换行
1：默认值nowrap（不换行）
2：wrap(换行) 。
flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content：定义了项目在主轴上的对齐方式
1.flex-start（默认值）左对齐
2.flex-end右对齐
3.center居中
4.space-between二端对齐
5.space-around分散对齐
6.space-evenly平均对齐。
align-items: 定义项目在交叉轴上如何对齐
1.stretch默认拉伸
2.flex-start交叉轴的起点对齐
3.flex-end：交叉轴的终点对齐
4.center：交叉轴的中点对齐
align-content：性定义了多根轴线的对齐方式。
1.stretch（默认值）：轴线占满整个交叉轴
2.flex-start：与交叉轴的起点对齐
3.flex-end：与交叉轴的终点对齐
4.center：与交叉轴的中点对齐
5.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
6.space-around：每根轴线两侧的间隔都相等
1：项目属性flex：通常用来设置某一个项目的特征
放大因子：flex-grow，收缩因子： flex-shrink，项目在主轴上的基准宽度flex-basis
默认值flex: 0 1 auto或者flex: initial：不会放大或收缩，允许放大和收缩：flex: 1 1 auto，禁止放大或收缩：flex: 0 0 auto;2：order：定义单个项目在所有项目中的排列顺序。数值越小，排列越靠前，默认为0。
3:align-self定义单个项目在交叉轴上的对齐方式
1：justify-content主轴对齐：
<style>*{padding:0;margin:0;box-sizing: border-box;}.demo1{margin:1em;padding:.5em;}.demo1>.content{width:30em;height: 6em;background-color:yellow;display: flex;/* 主轴左对齐： */justify-content: flex-start;/* 主轴右对齐 */justify-content: flex-end;/* 主轴居中对齐： */justify-content: center;/* 主轴二端对齐： */justify-content:space-between;/* 主轴分散对齐： */justify-content:space-around;/* 主轴平均对齐： */justify-content: space-evenly;}.demo1>.content>.box{height: 2em;width: 2em;background-color:skyblue;border: 1px solid #000;}</style></head><body><div class="demo1"><div class="content"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div></div></body></html>
2.交叉轴对齐方式演示：
代码；
<style>*{padding:0;margin:0;box-sizing: border-box;}.demo1{margin:1em;padding:.5em;}.demo1>.content{width:30em;height: 6em;background-color:yellow;display: flex;justify-content: space-around;/* 默认拉伸 */align-items: stretch;/* 交叉轴起点对齐： */align-items: flex-start;/* 交叉轴终点对齐： */align-items: flex-end;/* 交叉轴居中对齐： */align-items: center;}.demo1>.content>.box{/* height: 2em; */width: 2em;background-color:skyblue;border: 1px solid #000;}/* 使某个项目改变在元素中的顺序 */.demo1>.content>.box:nth-of-type(4){order: 1;}</style></head><body><div class="demo1"><div class="content"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div></div></body>
代码运行结果如下：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
