收藏
PHPz批改状态：合格
老师批语：
HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="test.css"></head><body><div class="container"><div class="item">item1</div><div class="item">item2</div><div class="item">item3</div></div></body></html>test.css代码*{padding: 0;margin: 0;box-sizing: border-box;}.container{/* 将元素转为flex属性 */display: flex;height: 20em;border: 1px solid #000;}.container > .item{width: 10em;padding: 2em;background-color: lightblue;border: 1px solid #000;}
效果：
项目在主轴上的排列方式
行排列flex-direction: row，与上面效果相同。
列排列flex-direction: column，效果如下：
项目在主轴上是否换行
flex-wrap: nowrap表示不换行。
wrap表示换行，未压缩宽度时，
压缩宽度，产生换行，效果如下：
一步实现flex-direction和flex-wrap的功能
flex-flow: row nowrap;
实现与前述同样的功能。
内容位置，表现为内容对齐，利用剩余空间的分配完成内容的对齐。
place-content: start
place-content: end
place-content: center
place-content: space-between
place-content: space-around（中间空间是两边的两倍）
place-content: space-evenly（所有间距相等）
纵向排列一样，就不列举了。
place-items: stretch
place-items: start
place-items: end
flex:放大 缩小 宽度
flex：0 1 auto，0不允许放大，1，允许缩小，auto宽度自动计算（宽度默认是根据内容变化，如果设置了宽度按设置算，如果设置了min-width则按此计算，即min-width > flex：width > element：width）。
flex：0 1 auto，即flex的默认值，也可以写作flex：initial。
注：flex：0，由于只写了第一个参数，系统默认为flex 0,1，auto，与上述效果一样。
效果查看，浏览器当前大小：
缩小浏览器视窗，阴影消失，元素也被压缩：
放大浏览器视窗，阴影扩大，元素不能被放大：
flex：1 1 auto，允许放大，允许缩小，宽度自动计算，可以简写为flex：auto。
flex：0 0 auto，禁止放大缩小，简写为flex：none。5. order属性
上代码：
.container .item:nth-of-type(1){background-color: coral;order:2;}改变第一个项目的背景色，调整他的顺序为2：
把项目3排在项目2之前，
.container .item:last-of-type{background-color: green;/* 项目2原来在最前顺序值为0，要排在项目2前，值应该小于0。 */order:-2;}
6. place-self属性
控制某一个属性的对齐方式
例如：place-self: start
```
.container .item:last-of-type{
background-color: green;
/ 项目2原来在最前顺序值为0，要排在项目2前，值应该小于0。 /
order:-2;
place-self: start;
}
效果：
```
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
