这是我参与「第四届青训营 」笔记创作活动的第19天
前言：今天继续来介绍弹性容器的样式，并补充一些对应的知识点
一.弹性容器的样式
*{ margin: 0; padding: 0; list-style: none; }
ul{
width: 800px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
/* flex-direction: column; */
/* flex-wrap:
设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
*/
/* flex-wrap: wrap-reverse; */
/* flex-flow: wrap 和 direction 的简写属性 */
/* flex-flow: row wrap; */
/*
justify-content
- 如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧
*/
/* justify-content: center; */
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
/* li:nth-child(1){
} */
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
二.弹性容器的样式（2）
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 800px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
/* flex-direction: column; */
/* flex-wrap:
设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
*/
/* flex-wrap: wrap-reverse; */
/* flex-flow: wrap 和 direction 的简写属性 */
flex-flow: row wrap;
/*
justify-content
- 如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧
*/
/* justify-content: center; */
/*
align-items:
- 元素在辅轴上如何对齐
- 元素间的关系
- 可选值：
stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐
*/
/* justify-content: center; */
align-items: flex-start;
/* align-content: 辅轴空白空间的分布 */
align-content: space-between;
}
li{
width: 200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:nth-child(1){
/* align-self: 用来覆盖当前弹性元素上的align-items */
align-self: stretch;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
li:nth-child(4){
background-color: yellow;
}
li:nth-child(5){
background-color: chocolate;
}
三.总结
今天的内容就到这里就结束了，明天我会继续更新更多的内容的，谢谢大家！
