收藏
PHPz批改状态：合格
老师批语：
1.容器上的属性
| 属性 | 描述 | 常用值 |
|---|---|---|
| display | 定义元素为弹性容器 | flex |
| flex-flow | 定义容器的主轴方向 | row、column、nowrap、wrap |
| place-content | 定义项目在主轴上的位置 | start、end、center、space-between、space-around、space-evenly |
| place-items | 定义项目在交叉轴上的位置 | stretch、start、end、center |
2.项目上的属性
| 属性 | 描述 | 常用值 |
|---|---|---|
| flex | 定义项目是否允许放大或缩小以及默认值 | flex: 1 0 auto; |
| order | 定义项目在容器类的排序 | order: 0; |
| place-self | 定义某个项目在交叉轴上的位置 | 用法和place-items一样、会覆盖掉place-items |
效果图
html部分
<body><div class="main"><div class="login"><a href="">登录</a>丨<a href="">注册</a></div><div class="slogan">PHP中文网 - 程序员梦开始的地方！</div></div></body>
CSS部分
<style>.main {/* 定义“flex”为一个弹性容器 */display: flex;/* 定义“flex”容器内的所有项目执行横向、不换行 */flex-flow: row nowrap;/* 定义“flex”容器内的所有剩余可用空间，在两个项目的中间位置 */place-content: space-between;/* 定义“flex”容器内的所有项目的宽和高 以及背景色 */width: 100%;height: 60px;background-color: blueviolet;/* 定义“flex”容器内所有项目在交叉轴上的位置 */place-items: center;}.main>div {/* 定义“flex”容器内所有项目的高度以及背景色 */width: 100px;height: 20px;background-color: blue;}.main * {/* 字体颜色设为蓝绿色 , a标签去除下划线*/color: cyan;text-decoration: none;}.main>.slogan {/* 定义“slogan”项目的排序位置提前 */order: 0;/* 定义“solgen”项目可随视觉窗口变大而变大 */flex: 1 0 auto;/* 为了能能够更直观的看清“solgen”项目的变化，给它换个背景色 */background-color: orange;/* 我们再让“solgen”项目在交叉轴上的位置在开始端 */place-self: start;}.main>.login {/* 定义“login”项目内的内容居右显示 ,及排序位置靠后*/text-align: right;order: 999;}</style>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
