search

博客列表 >flex属性实例

flex属性实例

霏梦
霏梦原创
2020年06月23日 15:50:49683浏览

- 作者：霏梦

基于浮动和定位的二列布局（复习）

  • 定义二列布局

    1. <header>页眉</header>
    2.   <div class="wrap">
    3.     <aside>左侧栏</aside>
    4.     <main>主体内容区</main>
    5.   </div>
    6. <footer>页脚</footer>

  • 浮动

  1.       aside,
  2.       main {
  3.         min-height: 500px;
  4.       }
  5.       .wrap {
  6.         width: 1000px;
  7.         border: 1px solid red;
  8.         /*防止踢陷*/
  9.         overflow: hidden;
  10.         margin: 10px auto;
  11.       }
  12.       aside {
  13.         width: 200px;
  14.         /*左浮动*/
  15.         float: left;
  16.         background-color: royalblue;
  17.       }
  18.       main {
  19.         width: 790px;
  20.        /*右浮动*/
  21.         float: right;
  22.         background-color: salmon;
  23.       }
  • 定位
  1.     <style>
  2.       aside,
  3.       main {
  4.         min-height: 700px;
  5.       }
  6.       .wrap {
  7.         width: 1000px;
  8.         min-height: 700px;
  9.         margin: 10px auto;
  10.         /* 定位父级 */
  11.         position: relative;
  12.       }
  13.       aside {
  14.         width: 200px;
  15.         background-color: springgreen;
  16.         /*定位*/
  17.         position: absolute; 
  18.         /*继承父级的高度*/
  19.         min-height: inherit;
  20.       }
  21.       main {
  22.         width: 790px;
  23.         background-color: lightcoral;
  24.         /*定位*/
  25.         position: absolute;
  26.         min-height: inherit;
  27.         right: 0;
  28.       }
  29.     </style>
  • 效果图

float

内容多栏/列显示

  • 要显示内容
    1. <div>
    2. 16日发布会上初步判断这起聚集性疫情是由人际传播或物品、环境污染引发的感染所至，现在有没有更新的判断？吴尊友：目前还没有。首先在新发地发生这样一起疫情就很蹊跷，它不是源于北京，一定是北京以外的人或者物，把病毒带到了新发地。物品最有可能是一些温度比较低、冷冻的物品。因为在这样的环境温度下，病毒存活时间比较长。如果是人，可能是两类：一类就是在市场工作的人员。二类可能就是顾客。
    3.   </div>
  • 通过column-count分列显示
  1.         /* 分列显示 */
  2.         column-count: 3;
  3.         /* column-width: 10rem; */
  4.         /* column-rule-style: solid; */
  5.         /* column-rule-width: 1px; */
  6.         /*简写*/
  7.         column-rule: 1px solid red;
  • 效果图

column-count

flexbos弹性盒布局预览

  • 定位几个元素
    1.   <div class="container">
    2.     <div class="item">1</div>
    3.     <div class="item">2</div>
    4.     <div class="item">3</div>
    5.   </div>

  • 实现弹性布局

    1. <style>
    2.     .container {
    3.       width: 600px;
    4.       /* 转为弹性盒 */
    5.       /* Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 */
    6.       display: flex;
    7.     }
    8.     /* 一旦将父元素转为弹性容器，内部的“子元素”就会转为：弹性项目， */
    9.     /* 不管这个项目标签之前是什么类型，统统转为行内块 */
    10.     /* 行内：全部在一排显示 */
    11.     /* 块：可以设置高和宽 */
    12.     .container > .item {
    13.       /*auto自动缩放，*/
    14.       /* flex: auto; */
    16.       width: 60px;
    17.       height: 60px;
    18.     }
    19.   </style>
  • 效果图
    flex

flexbos弹性盒多行布局预览

  1. <style>
  2.       .container {
  3.         width: 600px;
  4.         /* 转为弹性盒 */
  5.         /* Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 */
  6.         display: flex;
  7.       }
  8.       /* 一旦将父元素转为弹性容器，内部的“子元素”就会转为：弹性项目， */
  9.       /* 不管这个项目标签之前是什么类型，统统转为行内块 */
  10.       /* 行内：全部在一排显示 */
  11.       /* 块：可以设置高和宽 */
  12.       .container > .item {
  13.         /*auto自动缩放，*/
  14.         /* flex: auto; */
  16.         width: 100px;
  17.         width: 120px;
  18.         width: 150px;
  19.       }
  20.       .container {
  21.         flex-wrap: nowrap;
  22.         /* 换行显示 */
  23.         flex-wrap: wrap;
  24.       }
  25.     </style>

flex多行

flex单行容器中的项目对齐方式

  1.       .container {
  2.         width: 300px;
  3.         display: flex;
  4.         /* justify-content:属性定义了项目在主轴上的对齐方式。 */
  5.         /* 本质是设置容器中的剩余空间在所有项目之间的分配方案 */
  6.         /* 左对齐 */
  7.         justify-content: flex-start;
  8.         /* 右对齐 */
  9.         justify-content: flex-end;
  10.         /* 居中对齐 */
  11.         justify-content: center;
  12.         /* 两端对齐 */
  13.         justify-content: space-between;
  14.         /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
  15.         justify-content: space-around;
  16.         /* 平均分配 */
  17.         justify-content: space-evenly;
  18.       }
  19.       .container > .item {
  20.         width: 60px;
  21.       }

between
space-around
space-evenly

flex多行容器中的项目对齐方式

  1.       .container {
  2.         width: 300px;
  3.         display: flex;
  4.         /* 多行容器 */
  5.         flex-wrap: wrap;
  6.         height: 150px;
  7.         /* align-content属性定义了多根轴线的对齐方式 */
  8.         /* 默认值，轴线占满整个交叉轴 */
  9.         align-content: stretch;
  10.         /* 与交叉轴的中点对齐 */
  11.         align-content: center;
  12.         /* 与交叉轴的中点对齐 */
  13.         align-content: flex-end;
  14.         /* 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 */
  15.         align-content: space-around;
  16.         /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
  17.         align-content: space-between;
  18.         /* 平均分配 */
  19.         align-content: space-evenly;
  20.       }
  21.       .container > .item {
  22.         width: 60px;
  23.         background-color: greenyellow;
  24.         text-align: center;
  25.       }

space-evenly

主轴为垂直方向时的项目排列

  1.         /* 主轴方向：默认为行 */
  2.         /* flex-direction: row; */
  3.         flex-direction: column;
  4.         /* 项目二边分配 */
  5.         justify-content: flex-start;
  6.         justify-content: flex-end;
  7.         justify-content: center;
  9.         /* 项目之间分配 */
  10.         justify-content: space-between;
  11.         justify-content: space-around;
  12.         justify-content: space-evenly;

space-evenly

项目在交叉轴上的排列

  1.         /* 交叉轴上 */
  2.         align-items: stretch;
  3.         align-items: flex-end;
  4.         align-items: flex-start;
  5.         align-items: center;

align-items

主轴方向与项目排列的简写

  1. /* 默认值可以不用写 */
  2.         /* flex-direction: row; */
  3.         /* flex-wrap: nowrap; */
  4.         /* flex-flow: row nowrap; */
  5.         flex-flow: column wrap;

排序

  1.  .container > .item:first-of-type {
  2.         /* <!-- 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 --> */
  3.         order: 0;
  4.         order: 3;
  5.       }
  6.       .container > .item:last-of-type {
  7.         order: 5;
  8.       }

order

flex快速写一个导航

  • 定位导航显示内容
    1.   <header>
    2.     <nav>
    3.       <a href="">首页</a>
    4.       <a href="">视频</a>
    5.       <a href="">在线</a>
    6.       <a href="">资源</a>
    7.       <a href="">登录</a>
    8.     </nav>
    9.   </header>
  • 样式
    1. /* 初始化 */
    2.     * {
    3.       margin: 0;
    4.       padding: 0;
    5.       box-sizing: border-box;
    6.     }
    7.     a {
    8.       text-decoration: none;
    9.       color: grey;
    10.     }
    11.     nav {
    12.       height: 40px;
    13.       background-color: lightblue;
    14.       padding: 0 50px;
    15.       /* 使用弹性盒 */
    16.       display: flex;
    17.     }
    18.     nav a {
    19.       height: inherit;
    20.       line-height: 40px;
    21.       padding: 0 15px;
    22.     }
    23.     /* 鼠标经过的样式 */
    24.     nav a:hover {
    25.       background-color: rosybrown;
    26.       color: white;
    27.     }
    28.     /* 右显示 */
    29.     nav a:last-of-type {
    30.       margin-left: auto;
    31.     }
  • 效果图
    flex导航
上一条：定位三列布局与导航，flex弹性盒子布局，容器项目对齐方式，order控制项目顺序-web前端第9章6.22下一条：天融信防火墙命令行模式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多