博客列表 >媒体查询,固定定位,flex属性

媒体查询,固定定位,flex属性

木子木杉
木子木杉原创
2022年01月03日 22:06:13606浏览

媒体查询

PC优先

  1. @media screen and (min-width: 750px) {
  2. html {
  3. font-size: 16px;
  4. }
  5. }
  6. @media screen and (min-width: 375px) and (max-width: 749px) {
  7. html {
  8. font-size: 14px;
  9. }
  10. }
  11. @media screen and (max-width: 374px) {
  12. html {
  13. font-size: 12px;
  14. }
  15. }

固定定位

登录页面

  1. <form action="" class="modal-form">
  2. <fieldset>
  3. <legend>用户登录</legend>
  4. <input type="email" name="emil" placeholder="username@email.com" />
  5. <input type="password" name="password" placeholder="******" />
  6. <button>登录</button>
  7. </fieldset>
  8. </form>

固定位置

  1. .modal .modal-form {
  2. position: fixed;
  3. top: 10em;
  4. left: 20em;
  5. right: 20em;
  6. }

flex 属性

1.flex-flow:主轴方向,不换行/换行

  1. flex-flow: row nowrap;
  2. flex-flow: row wrap;

2.place-content:项目在主轴上的排列与空间分配

  1. place-content: start;
  2. place-content: end;
  3. place-content: center;
  4. place-content: space-between;
  5. place-content: space-around;
  6. place-content: space-evenly;

3.place-item:项目在交叉轴上的对齐方式

  1. place-items: stretch;
  2. place-items: start;
  3. place-items: end;
  4. place-items: center;

4.flex:放大因子 收缩因子 计算宽度

  1. flex:auto;
  2. flex:1 1 auto;
  3. flex:0 1 auto;
  4. flex:0 0 auto;

5.order越小越靠前

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议