search

博客列表 >flexbox弹性盒子

flexbox弹性盒子

简行
简行原创
2020年06月23日 18:11:28765浏览

一.flexbox弹性盒子

1.flexbox概述

1.css设置弹性容器： “display: flex”;
2.一旦将父元素弹性容器，那么其所属的子元素将自动成为弹性项目；
3.弹性项目：不管项目之前是什么类型，都统统转为“行内块”’
4.行内块：全部一排显示
5.块：可设置宽高

  • 火狐浏览器效果图：

  • css代码部分：

    1. <style>
    2.   .container {
    3.     width: 300px;
    4.     /* 设置弹性容器*/
    5.     display: flex;
    6.   }
    7.   .container > .item {
    8.     /* 一旦将父元素弹性容器，那么其所属的子元素将自动成为弹性项目； */
    9.     /* 弹性项目：不管项目之前是什么类型，都统统转为“行内块” */
    10.     /* 行内块：全部一排显示 */
    11.     /* 块：可设置宽高 */
    12.     /* flex: auto; */
    13.     width: 60px;
    14.     /* height: 45px;  */
    15.   }
    16. </style>
  • html代码：
    1. <body>
    2.   <div class="container">
    3.     <div class="item">1</div>
    4.     <div class="item">2</div>
    5.     <div class="item">3</div>
    6.   </div>
    7. </body>

    二.flex容器属性：flex-wrap

1.flex-wrap:nowrap不换行，又称单行弹性容器 ，默认值 ；如图：
|
2.flex-wrap: wrap换行，又称多行弹性容器；如图：
|

三.单行弹性容器项目对齐方式：justify-conten

justify-content:控制所有项目在主轴上的对齐方式；其本质是设置容器中剩余空间在所有“项目之间”的分配方案

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       /* 设置弹性容器*/
  5.       display: flex;
  6.       /* justify-content:控制所有项目在主轴上的对齐方式；其本质是设置容器中剩余空间在所有“项目之间”的分配方案 */
  7.       /* 左侧对齐 */
  8.       justify-content: flex-start;
  9.       /* 右侧对齐 */
  10.       justify-content: flex-end;
  11.       /* 居中对齐 */
  12.       justify-content: center;
  14.       /* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
  15.       /* 两端对齐 */
  16.       justify-content: space-between;
  17.       /* 分散对齐: 剩余空间在所有项目二侧平均分配 ，每个项目两侧的间隔相等，因此项目项目之间的距离是两侧的2倍*/
  18.       justify-content: space-around;
  19.       /* 平均分配 */
  20.       justify-content: space-evenly;
  21.     }
  22.     .container > .item {
  23.       width: 60px;
  24.     }
  25.   </style>

效果图：





四.多行行弹性容器项目对齐方式：align-content

css代码：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       height: 130px;
  5.       /* 设置弹性容器*/
  6.       display: flex;
  7.       /* 设置为多行容器 */
  8.       flex-wrap: wrap;
  9.       /* 默认值 */
  10.       align-content: stretch;
  12.       align-content: flex-start;
  14.       align-content: flex-end;
  16.       align-content: center;
  18.       align-content: space-between;
  20.       align-content: space-around;
  22.       align-content: space-evenly;
  23.     }
  24.     .container > .item {
  25.       width: 60px;
  26.     }
  27.   </style>

效果图：

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

css代码：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       height: 130px;
  5.       /* 设置弹性容器*/
  6.       display: flex;
  7.       /* 设置主轴方向：默认为行 */
  8.       /* 行 */
  9.       /* flex-direction: row; */
  10.       /* 列 */
  11.       flex-direction: column;
  13.       /* 项目二边分配 */
  14.       justify-content: flex-start;
  15.       justify-content: flex-end;
  16.       justify-content: center;
  18.       /* 项目之间分配 */
  19.       justify-content: space-between;
  20.       justify-content: space-around;
  21.       justify-content: space-evenly;
  22.     }
  23.     .container > .item {
  24.       width: 60px;
  25.     }
  26.   </style>

效果图：

六.项目在交叉轴上的排列

css代码：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       height: 130px;
  5.       /* 设置弹性容器*/
  6.       display: flex;
  7.       /* 项目在交叉轴上自动的拉伸的 */
  8.       /* 主轴为行 */
  9.       /* 默认值 stretch*/
  10.       align-items: stretch;
  11.       /* 左侧对齐 */
  12.       /* align-items: flex-start; */
  13.       /* 右侧对齐 */
  14.       align-items: flex-end;
  15.       /* 居中对齐 */
  16.       /* align-items: center; */
  17.     }
  18.     .container > .item {
  19.       width: 60px;
  20.     }
  21.   </style>

效果图：

七.flex快速写一个简易导航

HTML代码：

  1. <body>
  2.     <header>
  3.       <nav>
  4.         <a href="">首页</a>
  5.         <a href="">视频教程</a>
  6.         <a href="">入门教程</a>
  7.         <a href="">技术文章</a>
  8.         <a href="">资源下载</a>
  9.         <a href="">登录/注册</a>
  10.       </nav>
  11.     </header>
  12.   </body>

CSS代码：

  1.   <style>
  2.     /* 初始化 */
  3.     * {
  4.       margin: 0;
  5.       padding: 0;
  6.       box-sizing: border-box;
  7.     }
  8.     nav {
  9.       width: 900px;
  10.       height: 40px;
  11.       background-color: #000;
  12.       padding: 0 50px;
  13.       /* 设置弹性容器 */
  14.       display: flex;
  15.     }
  17.     nav a {
  18.       height: inherit;
  19.       line-height: 40px;
  20.       text-decoration: none;
  21.       color: cornsilk;
  22.       padding: 0 10px;
  23.     }
  24.     nav a:hover {
  25.       background-color: lightgreen;
  26.       color: lightsalmon;
  27.     }
  28.     a:last-of-type {
  29.       margin-left: auto;
  30.     }
  31.   </style>

效果图：

八.排序

代码：

  1.     <style>
  2.       .container {
  3.         width: 300px;
  5.         display: flex;
  6.       }
  7.       .container > .item {
  8.         width: 60px;
  9.       }
  10.  /* order: 默认是0，值越大排越后面 */
  11.       .container > .item:first-of-type {
  12.         order: 3;
  13.       }
  14.       .container > .item:last-of-type {
  15.         order: 5;
  16.       }
  17.     </style>
上一条：laravel基础（数据库、增、删、改、查、原生查询）下一条：flex布局常用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多