Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex常用属性总结及示例
Blogger Information
Blog 11
fans 0
comment 0
visits 6549
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex常用属性总结及示例
Feel Lonely
Original
811 people have browsed it

flex常用属性总结及示例

一、flex常用属性

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部分

  1. <body>
  2.     <div class="main">
  3.         <div class="login">
  4.             <a href="">登录</a>丨
  5.             <a href="">注册</a>
  6.         </div>
  7.         <div class="slogan">PHP中文网 - 程序员梦开始的地方！</div>
  8.     </div>
  9. </body>

CSS部分

  1. <style>
  2.     .main {
  3.         /* 定义“flex”为一个弹性容器 */
  4.         display: flex;
  5.         /* 定义“flex”容器内的所有项目执行横向、不换行 */
  6.         flex-flow: row nowrap;
  7.         /* 定义“flex”容器内的所有剩余可用空间，在两个项目的中间位置 */
  8.         place-content: space-between;
  9.         /* 定义“flex”容器内的所有项目的宽和高 以及背景色 */
  10.         width: 100%;
  11.         height: 60px;
  12.         background-color: blueviolet;
  13.         /* 定义“flex”容器内所有项目在交叉轴上的位置 */
  14.         place-items: center;
  15.     }
  17.     .main>div {
  18.         /* 定义“flex”容器内所有项目的高度以及背景色 */
  19.         width: 100px;
  20.         height: 20px;
  21.         background-color: blue;
  22.     }
  24.     .main * {
  25.         /* 字体颜色设为蓝绿色 , a标签去除下划线*/
  26.         color: cyan;
  27.         text-decoration: none;
  28.     }
  30.     .main>.slogan {
  31.         /* 定义“slogan”项目的排序位置提前 */
  32.         order: 0;
  33.         /* 定义“solgen”项目可随视觉窗口变大而变大 */
  34.         flex: 1 0 auto;
  35.         /* 为了能能够更直观的看清“solgen”项目的变化，给它换个背景色 */
  36.         background-color: orange;
  37.         /* 我们再让“solgen”项目在交叉轴上的位置在开始端 */
  38.         place-self: start;
  39.     }
  41.     .main>.login {
  42.         /* 定义“login”项目内的内容居右显示 ,及排序位置靠后*/
  43.         text-align: right;
  44.         order: 999;
  45.     }
  46. </style>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post